淘汰页面中无法正常工作的多个视图模型

Question

我在页面中有两个单独的视图模型

function AModel() {
...
}
function BModel() {
...
self.testValue= ko.observable('test')
}

 $(document).ready(function() {
var AModel1= new AModel();
var BModel1= new BModel();
ko.applyBindings(AModel1);
ko.applyBindings(BModel1);
});

现在在html页面中 我该如何让它发挥作用？

<span data-bind="text: BModel1.testValue" ></span>

Answer 1

您不应该在同一个DOM元素上多次调用ko.applyBindings，这可能会导致问题或自KO 2.3以来的异常。

你可以做的是创建一个“包装器”视图模型并用它调用ko.applyBindings：

$(document).ready(function() {
    var AModel1= new AModel();
    var BModel1= new BModel();
    ko.applyBindings({ AModel1: AModel1, BModel1: BModel1 });
}); 

然后你可以使用你的观点：

<span data-bind="text: BModel1.testValue" ></span>

演示JSFiddle。