多个视图模型中断 knockout.js

Question

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

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

Uncaught ReferenceError: Unable to process binding "foreach: function (){return seals }" Message: seals is not defined

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

Answer 1

问题在这里：

ko.applyBindings(demo, document.body);

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

<!-- ko foreach: seals -->

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

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

Answer 2

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

多个视图模型中断 knockout.js

Multiple view models break knockout.js

javascript

knockout.js

knockout-3.0