【问题标题】:Broken bindings when using KnockoutJS mapping plugin使用 KnockoutJS 映射插件时绑定损坏
【发布时间】:2012-06-22 00:28:03
【问题描述】:

我将 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。

【问题讨论】:

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


    【解决方案1】:

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

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

    试试这个。

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

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

    编辑

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

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

    希望这会有所帮助。

    【讨论】:

    • 如果第二个参数不包含映射调用添加的ko_mapping属性,则将其视为映射参数,只返回对象而不是更新它,即为什么在更新现有项目时我也总是使用三参数版本。
    • 道歉,没有忘记答案。 jsfiddle 的实现和我正在做的一样,所以我怀疑我还有其他问题。我将进行更多调查,以便了解发生了什么。
    猜你喜欢
    • 2013-07-02
    • 2013-11-14
    • 2012-03-06
    • 1970-01-01
    • 2012-08-12
    • 2015-07-04
    • 2013-01-19
    • 2012-08-29
    • 2012-07-31
    相关资源
    最近更新 更多