使用KnockoutJS映射插件时破坏绑定

时间:2012-06-19 21:42:40

标签: javascript knockout.js knockout-mapping-plugin

我正在使用KnockoutJS和ASP.NET MVC,当我使用ko.mapping时,我遇到了破坏绑定的问题。在我看来,我有一个文本区域,我想将输入键绑定到我的ViewModel上的方法(输入提交,基本上)。

我有以下自定义绑定:

ko.bindingHandlers.enterKey = {
        init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
            ko.utils.registerEventHandler(element, 'keydown', function(evt) {
                if (evt.keyCode === 13) {
                    evt.preventDefault();
                    evt.target.blur();
                    valueAccessor().call(viewModel);
                }
            });
        }
    };

我的视图代码如下:

 <div class="content-area" id="container" data-bind="with: channelContent"> 
       // other code, to show content from channelContent
       <textarea rows="1" cols="1" data-bind="value: $root.message, enterKey: $root.onMessageEnterKey"></textarea>
 </div>

如果将channelContent创建为ko.observable():

self.channelContent = ko.observable();

我用它填充:

$.post('@Url.Action("Content", "Channel")', { channelId: channel.Id }, self.channelContent);

然后一切正常,输入将正确调用我的onMessageEnterKey方法。不幸的是,因为在channelContent中有一些嵌套属性我想要观察,我正在尝试使用ko.mapping。

如果我使用ko.mapping:

self.channelContent = ko.mapping.fromJS(@Html.Raw(Json.Encode(Model.Channel)));

并使用以下内容更新内容:

$.post('@Url.Action("Content", "Channel")', { channelId: channel.Id }, function(result) {
     ko.mapping.fromJS(result, self.channelContent); // update the channel content

});

然后,虽然所有其他绑定似乎都正常工作(更新底层模型正确地更改了UI),但是enterKey绑定停止工作。它永远不会发射。

换句话说,只需将channelContent从简单的ko.observable更改为从ko.mapping初始化,就会破坏enterKey。

1 个答案:

答案 0 :(得分:1)

在黑暗中拍摄,没有更多的代码或jsfiddle,很难说。

我见过如果不使用3参数更新方法,映射插件无法更新的情况。

试试这个。

$.post('@Url.Action("Content", "Channel")', { channelId: channel.Id }, 
function(result) {
     ko.mapping.fromJS(result, {}, self.channelContent); 
});

顺便说一句,我会避免使用绑定,它的表现非常糟糕。

修改

实际上,这是一个jsfiddle,无论哪种方式都适用于我。如果您可以更新以显示您的情况有何不同,我可以提供帮助。

http://jsfiddle.net/madcapnmckay/52aMw/4/

希望这有帮助。