具有可观察对象的敲除组件不会更新数据

有几种方法可以将数据更新回主视图模型，如下所示。

但是首先，让我们稍微完善一下主视图模型。

function Vm(data) {
  var self = this;
  self.items = ko.observableArray(ko.utils.arrayMap(data, function(item) {
    return ko.observable(item);
  }));
  self.items.choice = ko.observable(0);
  self.items.choice.data = ko.computed(function() {
    return self.items()[self.items.choice()];
  });
}

快速与肮脏

第一种快速且肮脏的方法是将在主视图模型内部定义的函数传递给组件：

<div data-bind="component: {
    name: 'fruits',
    params: {index: items.choice(), data: items.choice.data(), update: items.update}
}"></div>

在组件内部，我们可以调用函数来保存更改：

self.data = ko.computed(function(){
    params.update(params.index, ko.toJS(self));
});

现在，主视图模型中的更新功能显而易见，无需为此花费更多的时间。

使用可订阅的

第二种方法是使用可订阅的对象沿视图模型建立通信：

ko.intramodels = new ko.subscribable();

从组件，发送通知：

self.data = ko.computed(function(){
  ko.intramodels.notifySubscribers(ko.toJS(self), "updateFruits");
});

主视图模型内的订阅将接收并保存更改，或多或少是这样的：

  ko.intramodels.subscribe(function(newValue) {
    self.items.replace(self.items()[self.items().index], newValue);
  }, self, "updateFruits");

当然这可以通过手工完成上面一样，但伟大的瑞恩·尼迈耶的邮筒库将是最佳的选择，在这里：https://github.com/rniemeyer/knockout-postbox。

我测试了这两种解决方案，但是不幸的是，当我激活-淘汰赛3.4中的新功能-推迟更新选项时遇到了一些麻烦：ko.options.deferUpdates = true;当我收到“超出最大调用堆栈大小”错误时。

删除循环依赖

因为我不想放弃并错过淘汰赛3.4的这一新的出色性能增强功能，并且由于此错误也或多或少地意味着，

循环依赖关系是设计错误，请重新考虑实现的某些部分，

我更改了视图模型，以使依赖项跟踪链仅在一个方向上起作用，而对整个组件数据仅使用一个可观察的模型：

ko.components.register('fruits', {
  viewModel: function(params) {
    var self = this;
    self.data = params.peek();
    self.item = {};
    self.item.name = ko.observable(self.data.name);
    self.item.color = ko.observable(self.data.color);
    self.update = ko.computed(function() {
       params(ko.toJS(self.item));
    });
  },
  template: {
    element: 'fruits-tpl'
  }
});

到目前为止，对于嵌套组件而言，这更明显了，这些组件内部具有所有数据处理和可观察的创建，并且主视图模型不必了解子级内部的内容以及原因-只需传递和接收即可。返回一个可观察对象：

<div data-bind="component:{name:'fruits',params:items.choice.data}"></div>

<template id="containers-tpl">
  <div data-bind="foreach: containers">
    <p><input data-bind="textInput: quantity"><span data-bind="text: name"></span></p>
  </div>
</template>

<template id="fruits-tpl">
  <p>Name:<input data-bind="textInput: item.name"></p>
  <p>Color:<input data-bind="textInput: item.color"></p>
  <div data-bind="component:{name:'containers',params:item.containers}"</div>
</template>

这里的关键点是：

• 将可观察对象传递给组件，而不仅仅是传递数据，并且
• 打破组件内部参数的依赖链。

带有嵌套组件的完整提琴：http : //jsfiddle.net/jo37q7uL/