knockout.js - 有人可以解释如何将两个 observableArrays 重做为一个吗？

Question

http://jsfiddle.net/Gm64C/2/

使用的数据内嵌在 javascript 面板的顶部。

如果您单击结果面板中的“显示详细信息”链接，您将在表格的列表下方获得与该药物相关的更多数据。如果您点击 drugName 行中的“编辑”，您可以更改该药物名称。如果更改名称，它将反映在数据表和数据表上方的表头中。它不会在结果面板顶部的列表中更新（即不同的 observableArray）。

我不知道如何使用一个 observableArray 来完成这一切。我正在使用 data.preferredDrugs 填充我的drugList oservableArray （这是一个对象数组，然后我使用 foreach: drugList 进行迭代）。如果我只用数据填充它，我不确定如何只迭代preferredDrugs 对象数组。这就是为什么我最终得到了两个 observableArrays - 一个用于药物名称，另一个用于药物详细信息。

我怎样才能使用一个 observableArray 来完成这项工作，所以如果您在表格中编辑药物名称，它会随处反映。

Answer 1

我修改了你的小提琴以消除对 jquery 的依赖。

http://jsfiddle.net/jeff1203/EPFbQ/

在修复中需要指出的一些事项：

• 由于您希望能够编辑名称并使更改可见，因此您至少需要使名称可观察。

  self.drugList = ko.observableArray(
      ko.utils.arrayMap(data.preferredDrugs, function (obj) {
          return ko.utils.extend(obj, {
              "drugName": ko.observable(obj["drugName"]),
          });
      })
  );
  

• 如果您跟踪所选药物、编辑文本框的内容以及您是否正在编辑的状态，将会更容易。这将有助于简化您的视图和视图模型代码。淘汰赛将解决所有其余的问题。

  // current drug
  self.currentDrug = ko.observable();
  
  // flag indicating we're editing the currently selected drug name
  self.isEditing   = ko.observable(false);
  // observable representing the editing text box
  self.editTextBox = ko.observable();
  // this will help with setting focus on the text box
  self.editTextBox.hasfocus= ko.observable(false);
  

• 保存编辑现在只需将选定对象的名称设置为编辑文本框的内容。

  // save an edit
  self.editSave = function (obj) {
      // copy the edited name to the current drug name
      obj.drugName(self.editTextBox());
  
      self.isEditing(false);
  };
  

• 您可以使用with绑定来设置绑定的上下文，而不是foreach像以前那样。

• 使用绑定设置 css 类和切换可见性，淘汰赛将为您完成繁重的工作。

  <td data-bind="css: { 'editing': $root.isEditing }">
      <span data-bind="visible: !$root.isEditing(), text: drugName" class="readonly"></span>
      <input id="edit_drugname" data-bind="value: $root.editTextBox, hasfocus: $root.editTextBox.hasfocus, css: { 'edit_textfield': !$root.isEditing() }" type="text" value="" size="35" />
      <button data-bind="click: $root.editSave, css: { 'edit_buttons': !$root.isEditing() }" class="save">Save</button>
      <button data-bind="click: $root.editCancel, css: { 'edit_buttons': !$root.isEditing() }" class="cancel">Cancel</button>
      <ul class="detail_actions" data-bind="visible: !$root.isEditing()">
          <li><a data-bind="click: $root.edit" href="#" class="edit">edit</a></li>
      </ul>
  </td>