从 ViewModel 外部调用 Knockout 函数答案

【问题标题】：Calling Knockout function from outside ViewModel从 ViewModel 外部调用 Knockout 函数
【发布时间】：2014-03-19 12:54:59
【问题描述】：

在我的具体示例中，有几个不同的小部件具有自己封装的 ViewModel。我需要一个全局保存按钮来保存每个单独的 ViewModel。我似乎无法弄清楚如何在各个 ViewModel 上调用函数。

示例 - 如何在每个 ViewModel 上调用 Save 函数：http://jsfiddle.net/sNSh2/4/

var ViewModel1 = function() {
    var self = this;
    self.firstName = ko.observable('');
    self.lastName = ko.observable('');

    self.firstName('John');
    self.lastName('Doe');

    self.Save = function () {
        alert(ko.toJSON(self));
    };
};
ko.applyBindings(new ViewModel1(), document.getElementById("person"));

var ViewModel2 = function() {
    var self = this;
    self.subscriptionLevel = ko.observable('');

    self.subscriptionLevel('premier');

    self.Save = function () {
        alert(ko.toJSON(self));
    };
};
ko.applyBindings(new ViewModel2(), document.getElementById("subscription"));

$('#save').on('click', function() {

});

【问题讨论】：

标签： javascript knockout.js

【解决方案1】：

我不明白你的问题，为什么不简单地持有你的模型对象的引用？

$(function() {
  ...
  var m1 = new ViewModel1();
  ko.applyBindings(m1, document.getElementById("person"));

  ...
  var m2 = new ViewModel2();
  ko.applyBindings(m2, document.getElementById("subscription"));

  $('#save').on('click', function() {
    m1.Save();
    m2.Save();
  });
});

如果您确实无法获取所有模型对象的引用（可能在独立的 js 文件中定义），ko 提供了从关联的 DOM 对象中获取上下文对象的方法。你仍然可以这样做：

ko.contextFor(document.getElementById("person")).$data.Save();
ko.contextFor(document.getElementById("subscription")).$data.Save();

【讨论】：

ko.contextFor 正是我想要的。谢谢！
ko.applyBindings() 在 Knockout 3.2 和 3.3 中返回 undefined，因此无法保存对视图模型的引用。因此，官方文档中的一些示例被破坏了。知道为什么吗？
@CoDEmanX，我不明白你的问题。没有人使用ko.applyBindings(...) 的返回值。请放一个 jsfiddle 来显示你的代码。

【解决方案2】：

Knockout 具有基本的发布/订阅功能。试试这个尺寸jsFiddle

var postbox = ko.observable();

var ViewModel1 = function() {
    var self = this;
    self.firstName = ko.observable('');
    self.lastName = ko.observable('');

    self.firstName('John');
    self.lastName('Doe');

    self.Save = function () {
        alert(ko.toJSON(self));
    };
    postbox.subscribe(function(newValue){
        self.Save();
    }, self, 'save');
};
ko.applyBindings(new ViewModel1(), document.getElementById("person"));

var ViewModel2 = function() {
    var self = this;
    self.subscriptionLevel = ko.observable('');

    self.subscriptionLevel('premier');

    self.Save = function () {
        alert(ko.toJSON(self));
    };

    postbox.subscribe(function(newValue){
        self.Save();
    }, self, 'save');
};
ko.applyBindings(new ViewModel2(), document.getElementById("subscription"));

$('#save').on('click', function() {
    postbox.notifySubscribers(null, "save");
});

【讨论】：

基本上页面有一个包罗万象的视图模型，它有postbox observable。

【解决方案3】：

您只需要实例化您的 ViewModel1 和 ViewModel2 函数：

$('#save').on('click', function() {
   var vm1 = new ViewModel1(),
       vm2 = new ViewModel2();

   vm1.SayHi();
   vm2.SayHi();
});

【讨论】：

抱歉，我的例子并没有真正捕捉到我想要做的事情。我更新了我的问题。当我实例化新版本的 ViewModel 时，我会丢失现有 ViewModel 的状态。