바인딩 처리기로 쓰기 가능한 계산 가능 관찰을 다시 설정 중입니다.

Question

개체가있는 선택 태그의 사용을 단순화하는 바인딩 처리기를 작성하려고합니다. 당신이 그것을 실행하는 경우이 바이올린 http://jsfiddle.net/p8dn2d2n/2/에서

ko.bindingHandlers.objectSelect = { 
    init: function(element, valueAccessor, allBindingsAccessor) { 
     var interceptor = ko.computed({ 
      read: function() { 
       return valueAccessor()[allBindingsAccessor().optionsValue](); 
      }, 

      write: function(value) { 
       valueAccessor()[allBindingsAccessor().optionsValue](value); 
      } 
     }); 

     ko.applyBindingsToNode(element, { 
      value: interceptor 
     }); 
    } 
}; 

는 선택에도 valueAllowUnset를 사용하는 경우, 청소 시작합니다.

두 번째 선택 항목에 주석을 추가하면 모든 것이 예상대로 작동합니다.

<select data-bind=" 
    value: current().val.id, 
    valueAllowUnset: true, 
    options: options, 
    optionsValue: 'id', 
    optionsText: 'name', 
    optionsCaption: ' '"> 
</select> 

<!-- Problem here --> 
<select data-bind=" 
    objectSelect: current().val, 
    valueAllowUnset: true, 
    options: options, 
    optionsValue: 'id', 
    optionsText: 'name', 
    optionsCaption: ' '"> 
</select> 

<p><span data-bind="text: current().val.id" /></p> 

<div> 
    <button data-bind="click: click">New</button> 
</div> 

내가 뭘하고있는거야?

Answer 1

주문 문제인 것처럼 보입니다. value 바인딩에는 다음과 같이 실행해야하는 바인딩 목록이 포함됩니다. after: ['options', 'foreach']

바인딩을 목록의 끝으로 이동하거나이 목록을 추가하면 문제가 완화됩니다.

ko.bindingHandlers.objectSelect = { 
    after: ['options', 'foreach'], 
    init: function(element, valueAccessor, allBindingsAccessor) { 
     var interceptor = ko.computed({ 
      read: function() { 
       console.log("hi"); 
       return valueAccessor()[allBindingsAccessor().optionsValue](); 
      }, 

      write: function(value) { 
       console.log("hi2", value); 
       valueAccessor()[allBindingsAccessor().optionsValue](value); 
      } 
     }); 

     ko.applyBindingsToNode(element, { 
      value: interceptor 
     }); 
    } 
}; 

http://jsfiddle.net/rniemeyer/ghpgc72t/