将值从一个视图模型传递到knockoutjs中的另一个视图模型

Question

当我搜索时，我发现如何将值从视图模型绑定到视图，而不是从视图模型绑定到视图模型我需要将一个属性值从一个视图模型传递到另一个视图模型，因为我需要在第一个视图模型中更新初始属性，然后我想在另一个viewmodel.because中使用它，这在测试时很有帮助。

假设下面的视图模型是第一视图模型，

var xx = xx || {};
    xx.yyy = xx.yyy || {};
    xx.yyy.zzz = function(object ) {
    var model = {};
    model.isTested= ko.observable(false);

   //below is the anonymous call to get the value(true/false):
    datasource.someFeatureEnable.isTested().done(function (featureToggle) {
    model.isTested(featureToggle.enabled);                
    });
}

我想在另一个视图模型中传递isTested(true/false)属性值，因为要正确运行应用程序并使测试通过

Answer 1

你可以让你的第二个视图模型依赖于第一个视图模型。

//this is the definition of your first view model.
function MainViewModel(dataSource) {
  var self = this;
  this.DataSource = dataSource;
  this.isTested = ko.observable(false);

  //a callable function that will run isTested check on someFeatureEnable
  this.TestSomeFeature = function() {
      self.DataSource.someFeatureEnable.isTested().done(function (featureToggle) {
          self.isTested(featureToggle.enabled);                
      });
  };
  return this;
}
//this is the definition of your second viewmodel
function SubViewModel(mainViewModel) {
  var self = this;
  self._mainViewModel = mainViewModel;
  //for read only access
  self.MainIsTested = function() { return self._mainViewModel.isTested(); }
  //for read/write
  self.MainIsTestedReference = self._mainViewModel.isTested
  return self;
}



//this is the code that initializes the whole page.
var main = new MainViewModel();
var sub = new SubViewModel(main);
//now run the check
main.TestSomeFeature();

//these are examples, showing how to get at the isTested property in your various viewmodels. The comments are what the code should return
sub.MainIsTested(); //false
main.isTested(); //false
//set isTested to true from the sub
sub.MainIsTestedReference(true);
//now main isTested returns true, because the sub viewmodel and the main viewmodel have references to the same object.
main.isTested(); // true

如果你想获得更高级的东西并使用基于事件的方法，我建议你去看看ko.postbox，看看这些参考资料。

http://www.knockmeout.net/2012/05/using-ko-native-pubsub.html

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

Answer 2

这将取决于两个视图模型是否在内存中并且同时可用。如果是这样的话，scaryman建议使用knockout-postbox是一个很好的建议。或者，您可以使用客户端消息总线，比如postal.js (这就是我使用的)。

如果视图模型不在内存中并且同时可用，那么有必要引入第三个静态对象(我们称之为"Z")来处理类似于事件聚合器模式的事情。从本质上讲，viewmodel-1将直接引用Z来存储isTested值。当viewmodel-2实例化时，它将检查Z以获得isTested值。这种方法并不是真正的事件聚合，因为您并不是在通道上发布消息(尽管，如果您采取的方法是将带有有效负载的消息发送到Z，那么它将比本例中需要的复杂得多)。

如果您正在使用AMD--比方说，需要--您只需要在每个视图模型中使用Z(或者，实际上，在每个依赖于Z的视图模型中)。您可以在http://www.requirejs.org上阅读有关require的内容。

裸露的骨骼，我们会有：

视图模型-1

this.isTested = ko.observable(false);
var Z = require("Z");
Z.isTested(this.isTested());

视图模型-2

this.isTested = false;  //Making the assumption that isTested doesn't have to be observable here--but it could be

var Z = require("Z");
this.isTested = Z.isTested();

当然，您可以详细说明这一点，以便Z可以处理视图模型的数组，也许可以使用一个可以查找相关视图模型的字典对象。

但是，我要告诫scaryman的方法，使视图模型相互依赖。如果您有许多具有isTested关系的视图模型，依赖关系图可能会变得非常复杂。我将把isTested和其他属性集中在一个第三方模块中: Z。

我要重申，Z应该是静态的。这意味着它应该返回一个对象文字，而不是一个构造函数。

最后，顺便说一句，我并不建议使用Mediator模式。我并不是建议Z存储对viewmodel-1和viewmodel-2的引用。

Answer 3

我会使用事件聚合器模式，这是一种解耦和强大的方式，任何监听器都可以监听任何事件，而不需要耦合到发布者。

您可以查看我是如何为这个库(SignalR库)做这些工作的。

https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy/

为了您的方便，我提取了客户端的唯一代码

http://jsfiddle.net/ezkGt/

基本上，您对pub / sub所做的是

signalR.eventAggregator.subscribe(Event, listener.onEvent, listener);

setInterval(function() {
    signalR.eventAggregator.publish(new Event(new Date()));
}, 500);

setTimeout(function() {
    signalR.eventAggregator.unsubscribe(listener);
}, 5000);