淘汰 observableArray 元素不更新视图答案

【问题标题】：knockout observableArray elements don't update view淘汰 observableArray 元素不更新视图
【发布时间】：2013-11-27 23:24:56
【问题描述】：

使用 knockoutjs，我有一个可观察的数组，并且子元素也是可观察的。可观察数组通过 foreach 绑定。当我更新数组的元素时，视图不会更新。

这是为什么呢？

我这里有一个 jsfiddle -> http://jsfiddle.net/axUm6/7/

<ul data-bind="foreach: someList">
    <li>
        <div style="float: left" data-bind="text: name"></div>
        <div style="padding-left: 50px;" class="update">update</div>
    </li>   
</ul>

vmTemplate = function () {
    var self = this;
    self.someList = ko.observableArray();

    self.init = function () {
        self.someList.push(ko.observable({name: 'test 1'}));
        self.someList.push(ko.observable({name: 'test 2'}));        

        $(document).on('click', '.update', function () {
            var itemToUpdate = ko.dataFor(this);
            self.alertTheList();
            itemToUpdate.name = 'test 3';            
            self.alertTheList();
            self.someList.valueHasMutated();
        }); //on click
    }; //init

    self.alertTheList=function(){
        var message='';
        for(var i=0;i<self.someList().length;i++){
            message+=self.someList()[i]().name;
        }
        alert(message);        
    };//alertTheList
};

var vm = new vmTemplate();
vm.init();
ko.applyBindings(vm);

【问题讨论】：

这不是它应该如何工作的。您不应该对视图模型中的视图有任何依赖，因此对于初学者来说，没有 jQuery 事件处理程序。使用click 绑定。比较：jsfiddle.net/nru85
我已将我的代码更新为类似于@Alexander 的代码，它使用正确的事件绑定。你是什么意思'对于初学者'还有什么问题吗？请记住，这是一个显示我的问题的示例，因此例如警报只是为了帮助调试。
好吧，我考虑在 KO 视图模型中使用 ko.dataFor() unclean，但它与您对视图有依赖关系这一点有关。目标必须是拥有一个没有外部依赖的视图模型。（如果您需要使用 jQuery，请在自定义绑定中使用，并且仅在此处使用。）

标签： javascript knockout.js

【解决方案1】：

您应该使用具有可观察属性的 ItemViewModel 而不是 self.someList.push(ko.observable(...))。看example。另外，我在敲除绑定上更改了 jQuery click 事件处理程序。

HTML：

<ul data-bind="foreach: someList">
    <li>
        <div style="float: left" data-bind="text: name"></div>
        <div style="padding-left: 50px;" class="update" data-bind="click: $parent.updateName">update</div>
    </li>   
</ul>

视图模型：

ItemViewModel = function(val) {
    var self = this;
    self.name = ko.observable(val);
}

vmTemplate = function () {
    var self = this;
    self.someList = ko.observableArray();

    self.init = function () {
        self.someList.push(new ItemViewModel('test 1'));
        self.someList.push(new ItemViewModel('test 2'));        
    }; //init

    self.updateName = function(item) {
        self.alertTheList();
        item.name('test 3');            
        self.alertTheList();
    }; //on click

    self.alertTheList=function(){
        var message='';
        for(var i=0;i<self.someList().length;i++){
            message+=self.someList()[i].name();
        }
        alert(message);        
    };//alertTheList
};

var vm = new vmTemplate();
vm.init();
ko.applyBindings(vm);

【讨论】：