什么是在Knockout中链接/同步视图模型的最佳方式?

jaf*_*ffa 14 publish-subscribe knockout.js knockout-postbox

如果您在一个页面上有多个视图模型,那么如何确保它们可以保持同步?例如,如果添加了一个项目或者在一个视图模型上单击了一个按钮,并且您希望其他视图模型对该更改敏感,那么Knockout可以本机地管理它,还是使用某些消息传递或发布/订阅体系结构更好.

我想远离管理模型之间的可观察性.

RP *_*yer 26

Knockout 2.0确实包含允许您执行基本发布/订阅的功能.以下是两个视图模型通过介体进行通信的示例.

var postbox = new ko.subscribable();

var ViewModelOne = function() {
    this.items = ko.observableArray(["one", "two", "three"]);
    this.selectedItem = ko.observable();
    this.selectedItem.subscribe(function(newValue) {
        postbox.notifySubscribers(newValue, "selected");
    });
};

var ViewModelTwo = function() {
    this.content = ko.observable();
    postbox.subscribe(function(newValue) {
        this.content(newValue + " content");
    }, this, "selected");
};

ko.applyBindings(new ViewModelOne(), document.getElementById("choices"));
ko.applyBindings(new ViewModelTwo(), document.getElementById("content"));
Run Code Online (Sandbox Code Playgroud)

第一个视图模型通过邮箱通知特定主题,第二个视图模型订阅该主题.他们没有直接相互依赖.

当然,邮箱不需要是全局的,可以传递给视图模型构造函数,也可以只在自执行函数内创建.

示例:http://jsfiddle.net/rniemeyer/z7KgM/

此外,它postbox可能只是一个ko.observable(包括ko.subscribable功能).

  • ko.subscribable是一个基类"类",可观察和计算的observable从中获取功能.它提供了observable和computed observable都使用的基本pub/sub功能. (3认同)