2013-03-19 2 views
2

중첩 배열에 대한 바인딩 작동 문제가 발생합니다. 페이지가 처음로드 될 때 값이 올바르게 표시되지만 편집 할 때 바운드 개체가 업데이트되지 않습니다.녹아웃 양방향 바인딩 중첩 배열

여기서 jsfiddle을 만들었습니다 : http://jsfiddle.net/coverbeck/qCzT6/1/.

내 HTML은 이것이다 :

<body> 
    <ul> 
<!-- ko foreach: {data: cities, as: 'city'} --> 
     <li> 
      <input data-bind="value: city.name"/> 
      <span data-bind="text: city.name"></span> 
     </li> 
    <ul> 
    <!-- ko foreach: {data: neighborhoods, as: 'neighborhood'} --> 
     <li> 
      <input data-bind="value: neighborhood"/> 
      <span data-bind="text: neighborhood"></span> 
     </li> 
    <!-- /ko --> 
    </ul> 
<!-- /ko --> 
</ul> 
</body> 

을 그리고 내 자바 스크립트는 다음과 같습니다

var sf = {name: ko.observable('San Francisco'), 
      neighborhoods: ko.observableArray([ 
       ko.observable('Haight'), 
       ko.observable('Bayview'), 
       ko.observable('Marina') 
      ]) 
     }; 
var ny = {name: ko.observable('New York'), 
      neighborhoods: ko.observableArray([ 
       ko.observable('Hells Kitchen'), 
       ko.observable('Times Square') 
      ]) 
      }; 

var cities = ko.observableArray([sf, ny]); 
var viewModel = { cities: cities }; 
ko.applyBindings(viewModel); 

나는 도시 이름을 수정, 해당 범위의 요소가 업데이트됩니다. 이웃 이름을 수정할 때 해당 span 요소가 업데이트되지 않습니다.

비슷한 질문을 이미 here에게 요청했는데 답변이 효과적이었습니다. 나는 같은 문제를 계속해서 반복하고있는 것처럼 보입니다. 이번에는 문제를보고있는 중첩 된 배열을 제외하고는. 중첩 된 배열에 대해 그 대답을 수정했지만이 경우에는 차이가없는 것으로 보입니다.

감사합니다,

찰스

+0

사람, 코드 서식이 잔인합니다. 그거 읽을 수 있니? – Tyrsius

+0

"Atrocious"는 약간 가혹한 것처럼 보이지만 서식을 업데이트했습니다. –

답변

2

나는 당신의 문제에서 오는 정확히 모르겠지만, 이런 식으로 해결할 수 있습니다

var ny = {name: ko.observable('New York'), 
      neighborhoods: ko.observableArray([ 
       new neighborhood('Hells Kitchen'), 
       new neighborhood('Times Square')])}; 

function neighborhood(name) { 
    this.name = ko.observable(name); 
} 

그런 다음 당신은 다음 foreach는 neighborhoods을 결합하여 name에 바인딩하십시오. 문제는 이름이없는 관찰 대상을 좋아하지 않을 수도 있다는 것입니다.

작동 중 fiddle here