javascript - Durandal - 跨 View 模型共享可观察值

Question

我正在尝试更新 viewmodelB 内的 viewmodel A 的可观察对象

这是 View 模型 A:

define(['knockout'], function(ko) {
 return {
  title: ko.observable('')
 }
})

和 View 模型 B:

define(['knockout', 'viewmodelA'], function(ko, viewmodelA) {
 function vm() {

  this.changeName = function() {
   viewmodelA.title('test')
  }

}

return vm

})

在viewmodelA html中，有一个<p data-bind="text: title"></p>标签，以及 changeName函数被挂接到 viewmodelB 的 html 上的点击绑定(bind)中。

但是，当我执行changeName函数时，viewmodelA.title() observable确实改变了它的值，但html没有更新。

我错过了什么？

Answer 1

在 View 之间进行通信时，最好不要将一个 View 注入(inject)另一个 View ，以免将一个 View 与另一个 View 紧密耦合并锁定应用程序的其他部分。

Durandal 具有发布/订阅功能。只需要求“durandal/app”，然后使用 app.trigger()和app.on()分别发布和订阅。

在viewmodelA.js中，我们将有以下内容:

define(['durandal/app', 'knockout'], function(app, ko) {
    var          
        title = ko.observable(''),
        compositionComplete = function () {
            app.on('title:changed').then( function(aTitle) {
                title(aTitle);
            });
        },
        detached = function () {
            app.off('title:changed');
        };

    return {
        compositionComplete: compositionComplete,
        detached: detached,
        title: title
    }
});

在viewmodelB.js中，我们将:

define(['durandal/app', 'knockout'], function(app, ko) {
    var             
        changeTitle = function (aTitle) {
            app.trigger('title:changed', aTitle);
        };

    return {
        changeTitle: changeTitle
    }
});

我正在使用单例模式，就像您一样，以及揭示模块模式将成员暴露给外部世界。

本质上，发生的事情是，每当 changeTitle被称为 viewmodelB使用新标题(作为字符串)作为参数，它将更改作为全局事件广播，并携带新标题作为有效负载。反过来，viewmodelA通过订阅该全局事件来表达对“title:changed”事件的兴趣，然后通过更改标题进行响应。

要测试这一点，您只需要一个小型测试工具(可能是您单击的按钮，或者您现在甚至可以硬编码测试值)来调用 changeTitle在viewmodelB携带表示新标题的字符串的有效负载。

通过采用上述方法，您可以完全解耦 View ，并且您还允许应用程序的其他 View 或部分响应“title:changed”事件。

如果您需要比 Durandal 的 pub/sub 更细粒度的控制，您始终可以使用 PostalJS，它是 AMQP 风格的成熟客户端消息总线。这就是我们使用的。