선택 목록 초기화시 녹아웃이 변경 이벤트를 발생시킵니다.

Question

녹아웃 선택 목록 바인딩에 문제가 있습니다. 내 문제는 설명, 키 및 수정이 가능한 항목 목록이 있습니다. 항목 목록을 사용하여 선택 상자를 채 웁니다. 사용자가 선택 목록에서 옵션을 선택할 때마다

var RequiredItemLine = function() { 
      var self = this; 

      self.desc = ko.observable(); 
      self.key = ko.observable(); 
      self.editable = ko.observable(false); 

      self.requireditemsdata = ko.observableArray([ 
       { desc: "Boarding of exposed wall openings in the vicinity of ...", key: "233", editable: true }, 
       { desc: "Call in manufacturers to initiate repairs on ...", key: "242", editable: true }, 
       { desc: "Call in specialist restorers/recoverers for ...", key: "244", editable: true }, 
       { desc: "Dispatch items for repair (schedule enclosed)", key: "243", editable: false }, 
       { desc: "Drying and cleaning of contents comprising ...", key: "240", editable: true }, 
       { desc: "Drying and protective oiling of water affected equipment", key: "241", editable: false }, 
       { desc: "Drying out of the affected areas of the premises", key: "235", editable: false }, 
       { desc: "Removal and repackaging of stock comprising ...", key: "239", editable: true }, 
       { desc: "Removal of agreed vulnerable contents to a place of safety (schedule enclosed) ", key: "236", editable: false }, 
       { desc: "Segregation of affected and unaffected stock comprising ...", key: "238", editable: true }, 
       { desc: "Temporary covering of roof to reinstate water tight integrity ", key: "234", editable: false }, 
       { desc: "Temporary guarding of affected area", key: "237", editable: false }, 
       { desc: "Temporary shoring of affected structure", key: "232", editable: false }]); 

      self.selectedItem = ko.observableArray([]); 

      self.selectedItem.subscribe(function (newValue) { 

       if (newValue) { 
        self.editable(newValue.editable); 
        //alert(newValue.editable); 
       } 
      }); 

     } 

, 그것은 편집 가능한 속성을 포함하고 선택 목록은 DOM에서 숨길 수 있고 텍스트 상자 DOM 볼 수 있고 값에에서 할당 한 선택리스트로부터 선택된 desc.

 var RequiredItems = function() { 

      var self = this; 

      self.requiredItemSelection = ko.observableArray([]); 

      self.addRequiredItem = function() { 
       self.requiredItemSelection.push(new RequiredItemLine()); 

      }; 
      self.removeRequiredItem = function (line) { 
       self.requiredItemSelection.remove(line); 
      }; 

     } 

     var vm = new RequiredItems(); 
     ko.applyBindings(vm); 

select가 DOM 변경 이벤트로로드 될 때마다 문제가 발생하여 선택 목록 또는 입력 필드가 표시됩니다.

   <div class='liveExample' > 

    <button data-bind='click: addRequiredItem'>Add Required Item</button> 
    <hr /> 

<table width='100%'> 

    <tbody data-bind='foreach: requiredItemSelection' > 
     <tr> 
      <td > 
       <select data-bind='options: requireditemsdata, optionsText: "desc", value: selectedItem'> </select> 
      </td> 

      <td> 
       <a href='#' data-bind='click: $parent.removeRequiredItem'> <img src="../images/Close.gif" /></a> 
      </td> 
     </tr> 
     <tr data-bind="visible : selectedItem().editable"> 
      <td> 
       <div class="editablecontent" data-bind='html : selectedItem().desc.replace(/\.\.\./g, "<span style=&#39;background-color:#ff77ee;margin-left:-2px;letter-spacing:0.05em&#39; contenteditable >...</span>")'></div> 


      </td> 
     </tr> 

    </tbody> 
</table> 

<ul data-bind='foreach: requiredItemSelection'> 


    <li data-bind="text : selectedItem().desc "></li> 
</ul> 




</div> 

는 바이올린 http://jsfiddle.net/aroor/VFv4H/3/ 참고를 참조하십시오 내가 바인딩 optionsCaption를 사용하려는 해달라고. 이 문제를 해결할 방법이 있습니까? 아니면 내가 제대로 데이터 구조를 선언하지 않았습니까?

Answer 1

기본값으로 설정하면 작동하지 않습니다.

optionsCaption에 글을 씁니다. 캡션 추가하려면이 구문을 사용

<select data-bind="options: xxxx, 
        optionsCaption:'select', 
        optionsText: yyyy, 
        value: jjjjj"> 
</select> 

또는

<select data-bind="options: xxxx, 
       optionsCaption: ' ', 
       optionsText: yyyy, 
       value: jjjjj"> 
</select> 

Answer 2

이 질문에 대한 답변을 찾는 동안 나는이 게시물을 발견했습니다. 이 문제가 여전히 문제가 아니지만 다음 사람에게 도움이 될지 확실하지 않습니다.

정확하게 이해한다면, 녹아웃 데이터 바인딩 불 녹아웃 이벤트가 바람직하지 않은 논리를 구현한다는 것입니다. 나는 실제 JavaScript 이벤트를 비교해보고 knockout에 의해 시작된 이벤트가 사용자 상호 작용에 의해 시작되는 이벤트와 다른 속성을 갖고 있다는 것을 발견했다.

다음은 이러한 속성의 존재 여부를 확인하여 해결 한 방법입니다. 대신이의

:

self.addRequiredItem = function() { 
    self.requiredItemSelection.push(new RequiredItemLine()); 
}; 

이 시도 :

self.addRequiredItem = function (ko_object, js_evt) { 
    if(js_evt.cancelable === false) { 
     self.requiredItemSelection.push(new RequiredItemLine()); 
    } 
}; 

당신은 당신이 당신의 이벤트에 녹아웃 모델과 자바 스크립트 이벤트를 전달할 수 있다는 사실을 활용해야 할 수 있습니다. 취소 가능한 속성은 knockout dom 이벤트에 존재하지 않는 것 같아서 이벤트가 사용자에 의해 트리거되었는지 확인했습니다.