녹아웃 jQuery UI 위젯 템플릿의 바인딩

Question

jquery-ui custom bindings을 사용하여 텍스트 필드에 날짜 피커를 추가하면 템플릿을 사용하지 않을 때만 내 모델을 업데이트합니다.

Simple JSFiddle demostration of problem

HTML :

<script type="text/html" id="datepicker-template"> 
     <span data-bind="text: $data"></span> 
     <input type="text" data-bind="jqueryui: {widget:'datepicker'}, value: $data"> 
</script> 

<h2>Witout templates</h2> 
<div> 
    <span data-bind="text: from"></span> 
    <input type="text" data-bind="jqueryui: {widget:'datepicker'}, value: from"> 
    <span data-bind="text: to"></span> 
    <input type="text" data-bind="jqueryui: {widget:'datepicker'}, value: to"> 
</div> 
<h2>With template<h2> 
<div data-bind="template: {name:'datepicker-template', foreach: dates}"></div> 

자바 스크립트 : 나는 매우 간단한 뭔가 빠진 것 같은

$(function(){ 
    var ViewModel = function(){ 
     this.from = ko.observable("from"); 
     this.to = ko.observable("to"); 
     this.dates = ko.observableArray([this.from, this.to]); 
    }; 

    var viewModel = new ViewModel();    
    ko.applyBindings(viewModel); 
});​ 

를 바랍니다.

Answer 1

실제로 문제는 jQueryUI 바인딩이없는 간단한 예에서 재현 할 수 있습니다. 문제는 녹아웃 템플릿의 내부에있는 $data 키워드와 관련이 있습니다.

분명히 $data은 템플릿 내부의 양방향 바인딩에 사용할 수 없습니다. this Google Groups thread for some commentary 참조 :

당신이 항목이있는 경우 : [ "하나", "둘", "세"] 또는 [ko.observable ko.observable ("하나"), ("2"), 코를 .observable ("three")] foreach $ 데이터 내에서 원시 값이되며 KO는 다시 쓸 방법을 알고있는 에 해당하지 않습니다. 값 에 대한 읽기/쓰기 액세스가 필요한 경우 속성의 객체 을 사용해야합니다. 다음 주의 ViewModel에서 당신이 쓸 수

var DateViewModel = function (initialValue) { 
    this.value = ko.observable(initialValue); 
}; 

과 :

그래서 이러한 한계를 극복하는 방법은 날짜 개체에 대한 간단한 뷰 모델을 만드는 것입니다

var ViewModel = function() { 
    this.dates = ko.observableArray([ 
     new DateViewModel("from"), 
     new DateViewModel("to") 
    ]); 
}; 

그리고 귀하의 템플릿은 다음과 같이됩니다.

<script type="text/html" id="datepicker-template"> 
    <span data-bind="text: value"></span> 
    <input type="text" data-bind="value: value"> 
</script> 

예 :http://jsfiddle.net/RjEnh/