KnockoutJS를 사용하여 배열 항목의 자식 속성에 바인딩하는 방법

Question

나는 Bind text to property of child object과 비슷한 질문을하고 자식 개체에 대해 KO 관찰 가능을 올바르게 만드는 데 어려움을 겪고 있습니다.

예를 들어 HTTP get을 사용하여 People의 JSON 배열을 반환하고 People 배열을 "payload"라는 속성 안에 배치합니다. 기본 바인딩을 사용하여 페이로드 속성에서 foreach를 수행하여 각 Person의 속성을 표시 할 수 있습니다. 그러나, 나는 혈압. 상태() status.bp 바인딩을 시도하고있다

/api/people (firstname, lastname, DOB, etc.) 
/api/people/1/status (bp, weight, height, etc) 

예를 들어, 다른 JSON에서 수신 될 때마다 사람,에 "상태"속성을 추가한다 무엇을해야 운이 없다.

JS 예 :

var TestModel = function (data) { 
var len = data.payload.length; 

for (var i = 0; i < len; i++) { 

    var elem = data.payload[i]; 
    var statusdata = $.getJSON("http://localhost:1234/api/people/" + elem.id + "/status.json", function (statusdata) { 

     elem.status = statusdata; 
     data.payload[i] = elem; 

     }); 
    } 
    ko.mapping.fromJS(data, {}, this); 
}; 

var people; 

var data = $.getJSON("http://localhost:1234/api/people.json", function (data) { 

    people= new TestModel(data); 
    ko.applyBindings(people); 
}); 

이 중요한 일을 내가해야합니다 1) 제대로 "페이로드") ID 속성 2 키 관측

을 "상태"를 만들기 위해 배열이라고 KO 통지

Help!

[업데이트] 댄의 답변에 따라 수정 작업과 편집 :

var TestModel = function(data) { 
... 
this.refresh = function() { 
    $.getJSON("http://localhost:1234/api/people", function (data) { 

     self.payload = ko.observableArray(); // this was the trick that did it. 

     var len = data.payload.length; 

     for (var i = 0; i < len; i++) { 

      var elem = data.payload[i]; 

      $.getJSON("http://localhost:1234/api/people/" + elem.id + "/status", function (statusdata) { 

       // statusdata is a complex object 
       elem.status = ko.mapping.fromJS(statusdata); 
       self.payload.push(elem); 
      }); 
     } 
    // apply the binding only once, because Refresh will be called with SetInterval 
    if (applyBinding) { 
     applyBinding = false; 
     ko.applyBindings(self); 
    } 
} 

나는 아직도 녹아웃 새로운 오전과 리프레시 기능 개선이 가장 환영합니다. 매핑은 매번 다시 적용됩니다.

Answer 1

관찰 가능한 배열을 정의한 다음 데이터를 개로 푸시해야합니다.

elem.status = ko.observableArray(); 

for (var i = 0; i < statusdata.length; i++) { 
    elem.status.push(statusdata[i]); 
} 

나는 데이터의 전체 구조는 예입니다 무엇을 말할 수 없다. 그러나 상태 인이 복잡한 객체 인 경우 자체 모델을 제공 할 수 있습니다.

for (var i = 0; i < statusdata.length; i++) { 
    elem.status.push(new statusModel(statusdata[i])); 
}