Javascript 不更新用户界面的敲除操作

我已经阅读了一些问题和答案，其中提到了一些不更新UI的原因。我已经完成了其中的一些工作，乍一看，我似乎不在可观察范围内工作，因此对底层数组的更改不会像预期的那样在可观察范围内更新

我开始在

observearray

上使用replace方法来尝试解决这个问题

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>

---

有人能给我一个指针，告诉我如何解决这个问题吗？

我不是

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

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);
}

我要将其标记为正确，因为它确实解决了问题。实际上，我已经解决了这个问题，在数组中创建活动作为可观察对象，然后触发对该对象而不是数组的更改。从：关键点：ObservalArray跟踪数组中的哪些对象，而不是这些对象的状态。简单地将一个对象放入observableArray并不能使该对象的所有属性本身都可见。当然，如果您愿意，您可以使这些属性可见，但这是一个独立的选择。observableArray只跟踪它所持有的对象，并在添加或删除对象时通知侦听器。@Janfohe绝对正确，这就是为什么我用同一对象的（尽管）类似实例替换实际数组索引的原因。在我看来，这应该足以触发删除和添加事件。。。显然淘汰赛不这么认为。：）无论如何，感谢commentAFAIK淘汰版出于性能原因将多个更改合并在一起。由于移除并重新添加同一对象，因此就可观察数组而言，实际上没有任何变化。如果我理解了您的代码以及您正试图正确实现的目标，最简单的方法就是将数组元素上的
active
属性设置为可观察的，并简单地进行切换。通过这种方式，您根本不需要添加和删除数组元素。是的，这看起来肯定是正确的，老实说，这可能是一件好事。你的建议就是我最终解决这个问题的方法。这似乎比移除并向数组中添加一个对象要轻得多。再次感谢您的评论。