Knockout.js：更新绑定？

Question

当我在 ko.applyBindings(); 之后将任何新元素注入到 DOM 中时被调用，那么淘汰赛将无法识别这些新元素。 我可以理解为什么会发生这种情况 - 它们只是没有被淘汰索引。

因此，起初我认为在添加新元素后再次调用 ko.applyBindings() 即可解决此问题，但后来我意识到，对于您进行的每个 ko.applyBindings() 调用，相应的事件都会被多次触发。因此，应用五次后， click: 绑定将被触发五次，所以这不是一个理想的解决方案;)

是否有类似 ko.updateBindings() 或其他东西的东西，告诉淘汰赛，嗯......更新元素绑定？

问候， 克里斯

Answer 1

每次调用 ko.applyBindings 时，都会检查整个 DOM 的绑定情况。因此，如果多次执行此操作，您将为每个元素获得多个绑定。如果您只想绑定一个新的 DOM 元素，您可以将此元素作为参数传递给 applyBindings 函数：

ko.applyBindings(viewModelA, document.getElementById("newElement"));

请参阅此相关问题：

可以调用ko.applyBindings来绑定分部视图吗？

Answer 2

如果不知道你到底在做什么，你似乎走错了路。您的视图应该由视图模型驱动。因此，您不应该直接添加随后需要应用剔除绑定的 DOM 元素。

相反，您应该更新视图模型以反映视图中的更改，然后导致新元素出现。

例如，对于您的 $('body').append('Click me!');< /code>，而不是在按钮应该可见时添加 DOM 元素，而是使用视图模型控制按钮可见性。

因此，您的视图模型包括

var viewModel = { clickMeAvailable: ko.observable(false) }

并且您的 HTML 包括

<a href="#" data-bind="click: something, visible: clickMeAvailable">Click me!</a>

当应用程序状态发生变化，因此“单击我”按钮可用时，您只需 viewModel.clickMeAvailable(true) 即可。

这样做的目的，也是淘汰赛的一个重要部分，是将业务逻辑与表示分离。因此，使“click me”可用的代码并不关心“click me”涉及一个按钮。它所做的只是在“click me”可用时更新viewModel.clickMeAvailable。

例如，假设“单击我”是一个保存按钮，在有效填写表单后应该可用。您可以将保存按钮可见性与 formValid 视图模型可观察对象联系起来。

但随后您决定更改一些内容，因此在表格生效后，会出现一份法律协议，在保存之前必须先同意该协议。表单的逻辑不会改变 - 当表单有效时它仍然设置 formValid。您只需更改 formValid 更改时发生的情况即可。

正如 lassombra 在这个答案的评论中指出的那样，在某些情况下，直接 DOM 操作可能是您的最佳方法 - 例如，在复杂的动态页面中，您只想在需要时对视图的部分进行水合。但这样做你就放弃了 Knockout 提供的一些关注点分离。如果您正在考虑进行这种权衡，请务必小心。

Answer 3

我刚刚偶然发现了类似的问题。我尝试向容器添加新元素并为它们提供 onclick 函数。

起初尝试了你所做的事情，甚至尝试了方法 ColinE 推荐。这对我来说不是一个实用的解决方案，所以我尝试了 SamStephens 方法并想出了这个方法，这对我来说非常有效：

HTML：

<div id="workspace" data-bind="foreach:nodeArr, click:addNode">
<div class="node" data-bind="attr:{id:nodeID},style:{left:nodeX,top:nodeY},text:nodeID, click:$parent.changeColor"></div>
</div>

JavaScript：

<script>
function ViewModel() {
var self = this;
var id = 0;
self.nodeArr = ko.observableArray();
self.addNode = function (data, event) {
    self.nodeArr.push({
        'nodeID': 'node' + id,
        'nodeX' : (event.offsetX - 25) + 'px',
        'nodeY' : (event.offsetY - 10) + 'px'
    })
    id++;
}
self.changeColor = function(data, event){
    event.stopPropagation();
    event.target.style.color = 'green';
    event.target.style.backgroundColor = 'white';
}
}
ko.applyBindings(new ViewModel());
</script>

您可以在 JS 中使用它小提琴是我做的。