多次应用绑定的正确方法答案

【问题标题】：Correct way of applying bindings multiple times多次应用绑定的正确方法
【发布时间】：2017-09-21 21:09:11
【问题描述】：

我正在重构一些现有代码以使用 Knockout。有问题的代码是一个日历，它是作为用户在之前和之后的几个月或几周内翻页时动态构建的。

日历的工作方式是当用户按下下一个或上一个时，容器会被清除然后重建。

让 Knockout 工作很容易，只需在单元格上应用正确的 data-bind 参数，然后调用 ko.applyBindings。

我担心的是，由于代码破坏了 Knockout 绑定到的 DOM 元素，因此它正在泄漏内存。是这样吗，如果是这样，在清除包含绑定的容器之前，日历应该做什么？

【问题讨论】：

您是否使用浏览器的developer tools 来检查您的假设？一般来说，如果你使用敲除来构建你的 DOM，你不应该接触它，除非它是通过绑定处理程序。使用 with、if、template 和 foreach 绑定来动态添加和部分 UI。

标签： knockout.js

【解决方案1】：

通常您不需要多次应用绑定。您创建一个模型，选择一个 DOM 节点，然后对其应用绑定。如果在应用程序生命周期内模型发生了一些变化，这种变化会通过模型的可观察或计算属性已更改的通知反映在标记上。

但是，如果您将敲除组件注入另一个应用程序，该应用程序管理已应用敲除绑定的节点，您可以从敲除绑定中清除节点：

var element = document.getElementById("MyNodeId");
ko.cleanNode(element);

【讨论】：

【解决方案2】：

不要使用 cleanNode 函数重新绑定模型 - 而是让也为 observable 建模。

取自Jef Claes blog，我一直使用这个概念重新绑定模型，而不是使用cleanNode。

示例代码

<div id="books">
    <ul data-bind="foreach: bookModel().booksImReading">
        <li data-bind="text: name"></li>
    </ul>
</div>

var page = {
    bookModel : ko.observable({
        booksImReading: [
            { name: "Effective Akka" }, 
            { name: "Node.js the Right Way" }]
    })
};

ko.applyBindings(page, elementToBind);

page.bookModel({
    booksImReading: [
        { name: "SQL Performance Explained" },
        { name: "Code Connected" }]
});

【讨论】：