javascript - 具有多对多关系的 Knockout JS ObservableArray

Question

我正在使用 Knockout.js 创建一个客人列表应用程序，到目前为止一切进展顺利。但是我有一个最佳实践问题。我的应用程序有几种不同类型的对象:客人和其中的标签。客人可以有多个标签，标签可以有多个客人。在应用程序的不同位置，我需要分别显示两个数组。例如，我有一个“客人” View ，可以在其中看到所有客人及其关联的标签，我还有一个“标签” View ，可以在其中查看所有标签及其关联的客人。目前，我为客人添加标签的代码如下所示:

var tag = function(opts) {
  this.guests = ko.observableArray()

  // Other tag code here...
}

var guest = function(opts) {
  this.tags = ko.observableArray()
  // Other guest code here...

  var self = this

  this.addTag = function(tag) {
    self.tags.push(tag)
    tag.guests.push(self)
  }
}

我知道除了独立更新每个 observableArray 之外，在 Knockout 中肯定有更好的方法来处理这种多对多关系。这也导致了一种递归应用程序结构，其中 guest 具有包含标签的标签属性/数组，其中包含包含 guest 的 guest 属性/数组，该 guest 具有标签属性......你明白了。

现在，ViewModel 结构是这样的:

- Parent Object
  - Guests ObservableArray
    - Guest Object
      - Tag Object as property of Guest
  - Tags ObservableArray
    - Tag Object
      - Guest Object as property of Tag

所以我想我的问题是双重的:1) 是否有更好的方法来构造我的 ViewModel 以避免递归数组？和 2) 我怎样才能更好地使用 Knockout.js 以 DRY 方式更新我的 ViewModel，而不是单独更新标签数组和客人数组？谢谢!

Answer 1

可能还有其他方法可以做到这一点，但这种方法的重复非常少，而且不会牺牲适当的建模。服务器生成这种格式的数据应该没有问题。

这里是(粗略的风格)fiddle .请注意，单击标签或 guest 将导致其下方的选择更新(默认情况下选择第一个)。

基本上，通过 id 存储关系，并使用 computed 数组来表示关联。这是一个基本的 View 模型:

var ViewModel = function(guests, tags) {
    var self = this;
    self.guests = ko.observableArray(
        ko.utils.arrayMap(guests, function(i){ return new Guest(i); }
    ));
    self.tags= ko.observableArray(
        ko.utils.arrayMap(tags, function(i){ return new Tag(i); }
    ));

    self.selectedGuest = ko.observable(self.guests()[0]);
    self.selectedTag = ko.observable(self.tags()[0]);

    self.guestTags = ko.computed(function() {
        return ko.utils.arrayFilter(self.tags(), function(t) {
            return self.selectedGuest().tags().indexOf(t.id()) > -1;
        });        
    });

    self.tagGuests = ko.computed(function() {
        return ko.utils.arrayFilter(self.guests (), function(g) {
            return self.selectedTag().guests().indexOf(g.id()) > -1;
        });        
    });
};

更新

所以我做了一个new fiddle演示一种不同类型的映射，但是这段代码可以很容易地与上面的 View 模型共存；它只是单独用于演示。它不是处理选择，而是提供一般查找，以便任何代码都可以使用它。下面是来自标签的 HTML(guests 是对称的)，以及添加到 View 模型的 guestMap 函数。

您会注意到名称现在是输入，因此您可以更改名称并观察所有绑定(bind)保持最新。让我知道你的想法:

<div>Tags
    <ul data-bind="foreach: tags">
        <li>
            <input data-bind="value: name, valueUpdate: 'afterkeydown'" />
            </br><span>Tags</span>
            <ul data-bind="foreach: guests">
                <li><span data-bind="text: $parents[1].guestMap($data).name()"></span></li>
            </ul>
        </li>
    </ul>
</div>

---

self.guestMap = function(id) {
        return ko.utils.arrayFirst(self.guests(), function(g) {
            return id == g.id();
        });
    };