多视图模型破坏了 knockout.js

Posted 2023-02-22

【中文标题】多视图模型破坏了 knockout.js

【英文标题】：Multiple view models break knockout.js

【发布时间】：2015-09-17 12:25:49

【问题描述】：

我正在尝试按照in the documentation 和in this other answer 的建议使用多个视图模型。

我在控制台中收到错误消息，抱怨未定义变量：

未捕获的 ReferenceError：无法处理绑定“foreach: function ()return seals” 消息：未定义封印

Reproduction online

html

<!-- ko foreach: seals -->
<div class="form-group">
    <label for="seal" class="col-xs-2 control-label" data-bind="text: 'Seal ' + name"></label>
    <div class="col-xs-8">
        <input type="text" class="form-control" data-bind="attr: name: 'seal' + formName" />
    </div>
</div>
<!-- /ko -->

JS

ko.applyBindings(demo, document.body);
ko.applyBindings(addEquipmentModel, document.getElementById('whatever'));

【参考方案1】：

问题出在这里：

ko.applyBindings(demo, document.body);

您正在将模型应用于document.body，因此它将尝试解析和绑定整个文档。当它到达部分时：

<!-- ko foreach: seals -->

您收到错误消息，因为 demo 模型没有 seals 属性。

实际上，您不希望绑定的元素重叠。换句话说，不要将一个模型绑定到绑定到另一个模型的元素的子元素。他们应该是兄弟姐妹，或者堂兄弟。不是直系后代。

【讨论】：

是的，我明白了。抛开一个问题。您建议在一个站点中创建多少个模型？我正在使用不同的菜单弹出窗口，但不确定是否需要分离以及它的优点。文档中不太清楚。例如，将一个用于标题，另一个用于正文，其他用于独立元素是否有意义？

@Alvaro：有点“一根绳子有多长？”题。答案是“视情况而定”。就个人而言，我更喜欢拥有一个包含我想要/需要/有意义的尽可能多的子模型的单个模型，而不是尝试将不同的模型绑定到 DOM 的不同部分。如果以后这些部分需要混淆，则更容易。

对，我明白了。谢谢你。

在这种情况下，您必须始终在数据绑定之前使用with，不是吗？

@Alvaro：您可以将with 用于绑定到您用于该特定部分的视图模型的不同部分。或者您可以完全限定您的属性，例如foreach: mySubModel.myProperty。或者，您可以根据需要混合使用这两种方法。如果您在with 绑定块中需要导航回一个级别，也不要忘记$parent。

【参考方案2】：

如果您需要在视图中嵌套多个视图模型，甚至在子父关系中，您应该考虑为此使用 Knockout 组件。除此之外的另一种可能性是在您的主视图模型中使用apply(this) 到其他视图模型“类”，以便您的主视图模型继承所引用模型的功能和属性。但是，如果您的视图模型中存在名称并发，这将导致问题。