Question

我已经阅读了一些问题和答案，其中提到了observableArrays没有更新UI的一些原因。我已经完成了其中的一些工作，乍一看似乎我没有在可观察的范围内工作，因此对基础数组的更改没有在observable中进行更新，这是预期的。

我开始在observableArray上使用替换方法尝试解决问题。

var self = this;

this.rightMenu = ko.observableArray();

this.activate = function(data, event) {
    var index = self.rightMenu.indexOf(data),
    active = _.findWhere(self.rightMenu(), {active : true}),
    toActivate = self.rightMenu()[index];

    data.active = true;

    self.rightMenu.replace(toActivate, data);
    self.rightMenu.replace(active, $.extend(active, { active : false}));
};

基本上我只是更新对象的活动属性。我一直认为使用可观察的方法会触发淘汰DOM侦听器并更新这些元素。在上面的场景中没有发生这种情况。

如果我在替换后调试了console.log self.rightMenu()，我就知道应该是什么了。但是，DOM中的活动类不会更新。

如果我这样做：

 self.rightMenu.push({name : 'test', href : 'test', active : true});

DOM 使用我推送给它的新值进行更新。

此VM绑定的DOM节点如下所示：

<ul class="sidebar right" data-bind="foreach: rightMenu">
    <li data-bind="css: $data.active ? 'active' : ''">
        <a data-bind="click:$root.activate, text:$data.name, attr { href : $data.href}"></a>
    </li>
</ul>

任何人都可以给我一个指针，告诉我如何解决这个问题吗？

Answer 1

我不是knockout专家，但我可以通过将数据对象复制到新对象来解决您的问题。

self.activate = function(data, event) {
        var index = self.rightMenu.indexOf(data);

        var obj = {
            active: true,
            name: data.name,
            href: data.href
        }

        self.rightMenu.replace(self.rightMenu()[index], obj);
}

Knockout observableArray不更新UI

1 个答案:

Fiddle