javascript - "site wide"ViewModel 变量的设计模式

Question

我正在寻找一种智能设计模式，用于将站点范围的变量加载到项目中多个 View 的 ViewModel 中(以 DRY 方式)。模糊的问题，一个例子可以澄清事情:

在我的项目中，我有一个部分 View ，它在客户端上显示来自服务器的常规消息和错误消息。消息与 Knockout 绑定(bind)绑定(bind)，如下所示:

<p class="message" data-bind="visible: (message.length > 0), text='message'"></p>

这意味着我必须将相同的代码添加到每个 ViewModel 中:

viewModel.message = ko.observable("some message from server or none");

这不是干的!

如何以一种聪明的方式解决这个问题？有没有适合这种情况的智能设计模式？

我已经知道一些“不太好的选择”，所以请保留好的选择。 :)

Answer 1

您可以使用apply来扩展模型。可以使用其他扩展方法，但这对于 Knockout ViewModel 来说很短且足够了。

jsFiddle

A 和 B 都扩展了 Base。您可以在一个 ViewModel 上扩展多个类(或接口(interface))，并且任何扩展基类的东西也会获取其基类的成员，等等。

在这种情况下，我们的基地有一个可观察到的错误。我们还可以给它一些与我们的服务器交互的功能等。

function Base(){
    var self = this;
    self.error = ko.observable('No Error');
}

A 扩展了 Base，并且可以在不定义错误的情况下访问错误。

function A(){
    var self = this; Base.apply(self, arguments);

    self.greeting = ko.observable('Hello');

    // Change the error
    self.error('A has an error');
}

B 还扩展了 Base，但仅使用 HTML 中的可观察值(请参阅 fiddle )。

function B(){
    var self = this; Base.apply(self, arguments);

    self.data = new Date;
}

ko.applyBindings({
    a: new A,
    b: new B
});