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>