Question

我正在构建一个包含两个主要组件的简单聊天应用程序：会话（convos）和用户。

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

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

在成群结算中，users是该convo中涉及的用户observableArray的{{1}}。

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

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

此时我已经有了viewModels，但没有其他的，我希望有人可以提供一些指导或一个如何（可靠）完成的示例。

Answer 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了解我的意思。

Answer 2

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

<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>

由于所涉及的所有内容都是可观察的，因此对用户状态的任何更改都将自动更新显示（如添加/删除用户或转发）。

Knockout将可观察数组与另一个ViewModel相关联

2 个答案: