Knockout 将 observable 数组与另一个 ViewModel 关联答案

【问题标题】：Knockout associate observable array with another ViewModelKnockout 将 observable 数组与另一个 ViewModel 关联
【发布时间】：2013-10-12 14:40:57
【问题描述】：

我正在构建一个简单的聊天应用程序，其中包含 2 个主要组件：对话 (convos) 和用户。

用户具有以下属性：id、name、status

Convos 具有以下属性：id、name、users

在 convos 中，users 是参与该 convo 的用户的 id 中的一个 observableArray。

我的目标是在 convos 视图中列出用户（按名称），但我正在寻找关于两个项目的一些指导：

通过在 convos viewModel 中从各自的 id 访问 users viewModel 来列出用户的最佳方式。
如何保持关联，以便（例如）用户将其状态从 active 更改为 away 时，其 id 存在的任何 convos 上的状态都会更新 viewModel。

此时我已经有了 viewModel，但仅此而已，我希望有人可以提供一些指导或示例，说明如何（可靠地）完成此操作。

【问题讨论】：

标签： javascript knockout.js model-associations

【解决方案1】：

答案可能是不在 convos 视图模型中按 ID 列出用户。而是通过引用列出实际用户。这将使您的两个问题都消失，因为 Knockout 将为您处理绑定（双向，如果需要）。

这是我的意思的一个例子：

var User = function(id,name,status) {
    this.id = ko.observable(id);
    this.name = ko.observable(name);
    this.status = ko.observable(status);
};

var Convo = function(id,name,users) {
    this.id = ko.observable(id);
    this.name = ko.observable(name);
    this.users = ko.observableArray(users);
};

var john = new User(1,'john','active');
var mary = new User(2,'mary','inactive');
var marcus = new User(3,'marcus','active');

var convo1 = new Convo(1, 'dinner', [john,mary]);
var convo2 = new Convo(2, 'birth day party tomorrow', [john,mary,marcus]);

这样，如果您在对话中的某处引用用户的状态，它将自动与您的视图模型保持同步。

请参阅 this fiddle 了解我的意思的演示。

【讨论】：

【解决方案2】：

通常你会做这样的事情（假设 Convos 是包含 Convo 条目的顶级 observableArray）：

<ul data-bind="foreach: Convos">
  <li>Conversation <span data-bind="name"></span>
     <ul data-bind="foreach: users">
        <li><span data-bind="text: name"></span> has status
            <span data-bind="text: status"></span>
        </li>
     </ul>
  </li>
</ul>

由于所涉及的所有内容都是可观察的，因此对用户状态等的任何更改都会自动更新显示（就像添加/删除用户或 convo 一样）。

【讨论】：