Knockout.js 如何知道将视图元素绑定到哪个模型？答案

【问题标题】：How does Knockout.js know which model to bind view elements to?Knockout.js 如何知道将视图元素绑定到哪个模型？
【发布时间】：2014-04-02 03:14:51
【问题描述】：

考虑一下来自the very first Knockout tutorial的示例代码：

<p>First name: <strong data-bind="text: firstName">todo</strong></p>
<p>Last name: <strong data-bind="text: lastName">todo</strong></p>

<script>
    function AppViewModel() {
        this.firstName = "Bert";
        this.lastName = "Bertington";
    }
    ko.applyBindings(new AppViewModel());
</script>

Knockout 如何知道 HTML 中的 text: firstName 指的是 AppViewModel 的 firstName 属性，而不是某些 other 模型的 firstName 属性？它是否只是推断这一点，基于以下事实：(a) HTML 要求 Knockout 将其绑定到名为 firstName 的属性，并且 (b) AppViewModel 恰好有一个名为 @ 的属性987654330@?

我希望我的 data-bind 属性必须指定与视图关联的 model，就像 well 作为属性，以便 Knockout 知道 要在哪个模型中找到该属性。

毕竟，我完全有可能拥有另一个具有相同属性名称的模型：

<script>
    function AppViewModel() {
        this.firstName = "Bert";
        this.lastName = "Bertington";
    }
    function OtherModel() {
        this.firstName = "Chet";
        this.lastName = "Chesterson";
    }
    ko.applyBindings(new AppViewModel());
    ko.applyBindings(new OtherModel());
</script>

（我实际上尝试了上面的代码，并且似乎Knockout首先绑定了传递给applyBindings()的任何模型，而忽略了第二个。）

我只是在学习 Knockout，我敢肯定这是非常初级的。但是我已经完成了前四个教程，并做了一些边读，但我没有看到任何解决这个基本问题的方法。

【问题讨论】：

stackoverflow.com/questions/9293761/…
我想你回答了你自己的问题。我相信您只需要调用 .applyBindings 一次。您传递的视图模型是绑定的。 data-bind 属性告诉 KO 哪个属性。
您还可以将绑定应用到 DOM 中的多个节点...应用绑定确实需要第二个参数，即您要绑定到的元素...因此您可以使两个绑定都工作如果你有 2 个单独的元素，每个元素都有唯一的 ID...getElementById('xxx')

标签： javascript mvvm knockout.js

【解决方案1】：

ko.applyBindings(new AppViewModel());

将您的绑定应用到整个文档。 Knockout 不希望您将多个视图模型绑定到同一个 HTML。这就是为什么可以选择在 HTML 文档的一部分上应用绑定的原因。

ko.applyBindings(new AppViewModel(), document.getElementById('test'));

【讨论】：

所以一个 Knockout 模型代表了我的应用程序的整个状态？与其他 MV* 范例中的“模型”相比，它们代表应用程序中的离散对象？
是的，视图模型是数据在您的 UI 中的表示。通过将其绑定到具有 data-bind 属性的元素，knockout 将在您的视图模型属性更改时自动更新您的 UI，反之亦然。 Knockout 是一个 MVVM，它使用与 MVC 相同的模式，但它添加了 viewmodel 以轻松管理您的 UI。