有人可以解释如何从两个observableArray到一个返工？

Question

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

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

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

我想不出如何使这一切工作与一个observableArray。我正在填充drugList oservableArray与data.preferredDrugs（这是一个对象数组，然后使用foreach：drugList进行迭代）。如果我用数据填充它，我不确定如何遍历只有preferredDrugs对象数组。这就是为什么我结束了两个可观察的阵列 - 一个用于药物名称，另一个用于药物细节。

我该如何使用一个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 binding，你必须设置您的绑定的情况下，而不是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>