누군가가 두 observableArrays에서이를 재 작업하는 방법을 설명 할 수 있습니까? 사용

Question

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

데이터는 자바 스크립트 패널 상단 인라인.

결과 패널에서 "세부 정보 표시"링크를 클릭하면 테이블의 목록 아래에 채워지는 그 약물과 관련된 더 많은 데이터를 얻게됩니다. 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); 
  }; 
  

• 당신은 당신이 가지고로 foreach 대신 바인딩의 컨텍스트를 설정하는 with binding를 사용할 수 있습니다.

• 바인딩을 사용하여 CSS 클래스를 설정하고 가시성을 전환하면 knockout이 문제를 해결합니다.

  <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>