2

使用 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);
4

1 回答 1

2

您应该使用具有可观察属性的 ItemViewModel 而不是 self.someList.push(ko.observable(...))。看例子。另外，我在敲除绑定上更改了 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);
于 2013-11-14T19:37:36.220 回答