javascript - 无法从一个 View 模型更新另一个 View 模型的可观察值

Question

我想从一个 View 模型更新另一个 View 模型的一个可观察值。该值发生更改，但不会反射(reflect)在 UI 上(HTML 中)

我不确定代码有什么问题..

这是代码:

http://jsfiddle.net/rahulrulez/RSL4u/2/

<p data-bind="text: name"></p>

没有更新。

Answer 1

您正在绑定(bind)到两个独立 View 模型实例

ko.applyBindings(new viewModel1(), document.getElementById("firstViewModel"));
ko.applyBindings(new viewModel2(), document.getElementById("secondViewModel"));

因此，您的 viewModel1 和 viewModel2 之间没有任何联系，当您在 viewModel1 中写入时:

var vm2Object = new viewModel2();

那么您将创建一个完全新的 viewModel2 实例，该实例与 applyBindings 中使用的实例无关。

要解决此问题，您需要在 View 模型之间建立连接，就像这样(还有多种其他方法可以实现，例如使用容器 View 模型、将 View 模型相互嵌套等):

var viewModel1 = function(vm2){
   var self = this;
   var vm2Object = vm2; //use vm from parameter
   //...
}

当调用applyBindings时:

var vm2 = new viewModel2();
ko.applyBindings(new viewModel1(vm2), document.getElementById("firstViewModel"));
ko.applyBindings(vm2, document.getElementById("secondViewModel"));

演示 JSFiddle .