敲除映射 - 仅使 observableArray 的某些属性变为可观察的

Question

如何调整下面的代码，以便只有“viewNotes”属性变得可观察？

我需要从服务器读取数据并将其应用于 ObservableArray。在数据中的所有属性中，只有 viewNotes 属性需要是可观察的。其他一切都不需要 2 路数据绑定。

这是来自服务器的数据：

var data = [
  {
    "itemName": "Item 1",
    "notes": "This is item 1",
    "viewNotes": false
  },
  {
    "itemName": "Item 2",
    "notes": "This is item 2",
    "viewNotes": false
  }
]

然后我将它数据绑定到页面，如下所示。这个想法是显示数据，但“notes”属性是隐藏的，除非用户单击以查看它。这个可见性切换链接到 viewNotes 属性 - 因此它需要是可观察的，而其他任何东西都没有。

<div data-bind="foreach: items">
  <div data-bind="text: itemName"></div>
  <button data-bind="click: $parent.viewTheNotes">View Notes</button>
  <div data-bind="if: viewNotes">
    <div data-bind="text: notes"></div>
  </div>
  <hr>
</div>

问题是我似乎无法调整映射插件以将数据带入 observableArray，而每个数组元素的“viewNotes”属性都是可观察的。这是我的代码：

var mapping = {
  "include": ["viewNotes"]
};

ko.mapping.fromJS(data, mapping, self.items);
alert("is viewNotes observable: " + ko.isObservable(self.items()[0].viewNotes));
alert("is itemName observable: " + ko.isObservable(self.items()[0].itemName));

如您所见，警告框告诉我们每个数组元素的所有子属性似乎都已映射到可观察对象。

如何调整它以便只有 viewNotes 属性是可观察的？

这是一个显示问题的小提琴： https://jsfiddle.net/gxreh8sy/27/

Answer 1

您正在寻找的选项是“观察”映射选项。来自http://knockoutjs.com/documentation/plugins-mapping.html：

如果你希望映射插件只创建一些 observables 你的 JS 对象的属性并复制其余部分，你可以指定一个 要观察的属性名数组：

var mapping = {
    'observe': ["propertyToObserve"] } var viewModel = ko.mapping.fromJS(data, mapping);
}

但是，在您的情况下，该属性在根级别不存在，因为它位于项目数组的每个子项上。因此，您可以先循环并在循环中映射数组的每个项目，也可以使用带有回调函数的“创建”映射选项为每个子对象指定一个子映射。

var mapping = {
    create: function(options){
        return ko.mapping.fromJS(options.data, {observe: "viewNotes"});
    }
};