无法从另一个 viewModel 更新 observable答案

【问题标题】：Can not update observable of one viewModel from another无法从另一个 viewModel 更新 observable
【发布时间】：2014-02-18 05:37:42
【问题描述】：

我想从另一个视图模型中更新一个可观察对象。该值已更改，但不会反映在 UI（在 HTML 中）

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

代码如下：

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

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

不会更新。

【问题讨论】：

你能使用包含两个子视图模型的视图模型吗？
这是你想做的吗？ jsfiddle.net/RSL4u/6

标签： javascript mvvm knockout.js

【解决方案1】：

您正在绑定到两个独立视图模型实例

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

所以你的viewModel1 和viewModel2 之间没有联系，当你写在你的viewModel1 时：

var vm2Object = new viewModel2();

那么您正在创建一个全新的viewModel2 实例，它与applyBindings 中使用的实例无关。

要解决此问题，您需要在视图模型之间建立连接，就像这样（还有多种其他方法可以做到，例如使用容器视图模型、将视图模型相互嵌套等）：

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.

【讨论】：

【解决方案2】：

您有两个不同的 VM2 ViewModel 实例。而是这样做

http://jsfiddle.net/RSL4u/4/

我已将 VM2 设为 VM1 的子模型

this.vm2Object = new viewModel2();

【讨论】：

【解决方案3】：

我尝试了你所有的方法，但由于某种原因，它们并没有真正使用我的解决方案。

经过大量谷歌搜索和深入挖掘 KnockoutJS 文档和扩展后，我发现 Knockout Postbox 可以让我们在多个不相关的视图模型之间同步或通信。

https://github.com/rniemeyer/knockout-postbox

这是我的演示示例的 sn-p...

var viewModel1 = function(){
   var _self = this;
   _self.name = ko.observable("Rahul").syncWith("syncedName");
}

var viewModel2 = function(){
   var _self = this;
   _self.firstName = ko.observable("Rahul").syncWith("syncedName");

}

ko.applyBindings(new viewModel1(), document.getElementById("div1"));
ko.applyBindings(new viewModel1(), document.getElementById("div2"));

两个 observable 现在都同步了。我发现这比嵌套对象要好得多。至少它满足了我的应用程序的需要。

非常感谢您的帮助..

我的演示：JSFiddle：http://jsfiddle.net/rahulrulez/2kuSh/1/

希望对你有帮助..

非常感谢，

拉胡尔·帕蒂尔。

【讨论】：