2012-11-24 3 views
2

줄 바꿈 편집을 구현하기 위해 foreach 내에서 눈에 보이는 녹아웃 바인딩 및 인덱스를 사용하려고합니다. 이것은 디스플레이를 만들고 각 라인에 대해 div를 수정하고 눈으로 볼 수있는 바인딩을 사용하여 그 중 하나를 선택하여 수행됩니다. 문제는 observable이 수정 div와 표시 div 사이를 추적하지 않는다는 것입니다. 왜 내 ko가 observable을 업데이트하지 않았 음을 계산합니까?

나는, 줄에 수정을 클릭하여 문제를 참조 값을 편집하고 저장 클릭이 바이올린 http://jsfiddle.net/rscidmore/YrsCj/57/

를 만들었습니다. 이제 동일한 관측 값에 대해 두 개의 값이 있음을 알 수 있습니다.

Javascript: 
var myViewModel = { 
    vals: ko.observableArray([ 
     {label: 'first', item: 'one'}, 
     {label: 'second', item: 'two'}, 
     {label: 'third', item: 'three'} 
    ]), 
    idx: ko.observable(-1) 
}; 

ko.applyBindings(myViewModel); 



HTML: 
<body class='ui-widget'> 
<div class='container'> 
    <!-- ko foreach: vals --> 
    <div class='label' data-bind="visible: $root.idx() == $index()"> 
     <span class='lbl' data-bind="text: label"></span>: 
     <input type='text' data-bind="value: item"> 
     <input type='button' value="save" data-bind="click: function() 
     { $root.idx(-1);}" /> 
    </div> 
    <div class='label' data-bind="visible: $root.idx() != $index()"> 
     <span class='lbl' data-bind="text: label"></span>: 
     <span data-bind="text: item"></span> 
     <input type='button' value="modify" data-bind="click: function() 
     { $root.idx($index());}" /> 
    </div> 
    <!-- /ko --> 
</div> 
</body> 

답변

3

ko.observableArray는 항목을 추가 및 제거를 추적하고 하나의 항목을 변경 한 경우는 추적하지 않습니다.

형성 documenation :

요점 : 개체가 배열에있는 observableArray 트랙,

그래서 당신이 항목에 observable properties이 필요 해당 개체의 없는 상태 변경 사항 추적 :

vals: ko.observableArray([ 
     {label: 'first', item: ko.observable('one')}, 
     {label: 'second', item: ko.observable('two')}, 
     {label: 'third', item: ko.observable('three')} 
    ]), 

Demo fiddle.