Question

这是我的视图模型。

self.Notifications = ko.observableArray(); // loaded by ajax

self.MarkAsFlagged = function(item) { //updates the item in Notifications
        console.log('MarkAsFlagged');
        var index = self.Notifications.indexOf(item);
        console.log(index);

        var flagStatus = item.Flagged; // current flagstatus
        item.Flagged = !flagStatus; // set true if false and viceversa

        flagStatus = !flagStatus;// set true if false and viceversa
        self.Notifications.replace(self.Notifications()[index], item);
}

这是我的HTML

<ul data-bind="foreach: Notifications "  >
 <li>
   <span data-bind="text: Name" style="font-weight: bold;"></span>       
   <div style="float: right; width:15px;">
       <input type="image" id="" data-bind="click:function(){$parent.MarkAsFlagged($data)},css: {flagged: Flagged==true, unFlagged: Flagged==false }" style='float:right;padding-right:3px;' />
   </div>
 </li>
</ul>

当我点击MarkedAsFlagged并替换self.Notifications()上的项目时，ui没有变化。

当我从数组中删除任何项目时，ui仅响应。请在这里帮忙。

Answer 1

通知数组中的项目道具不可观察。因此，当您在MarkAsFlagged中更改它时，ui不会更新。您应该为具有可观察道具的项目创建自己的模型：

function ItemModel(data) {
    var self = this;
    self.Name = ko.observable(data.Name);
    self.Flagged = ko.observable(data.Flagged);
}

function ViewModel() {
    var self = this;
    self.Notifications = ko.observableArray();

    self.loadNotifications = function() {
       // loading data...

       var itemModels = _.map(data, function (item) {
           return new ItemModel(item);
       }); 
       ko.utils.arrayPushAll(self.Notifications(), itemModels);
    }
}

更改项目时，不会更新Observable Array UI

1 个答案: