knockout.mapping.js로 아약스 후 데이터를 동적으로 렌더링하는 방법은 무엇입니까?

Question

knockout.js & knockout.mapping.js를 사용하고 있습니다. 데이터 리소스를 아약스로 변경하면 데이터를 동적으로 새로 고칠 수 없습니다.

실제 프로젝트에서는 변경 js 코드없이 html 모듈을 사용자 정의하므로 데이터가 확실하지 않으므로 데이터 구조가 복잡하고 동적입니다. 달성하고자하는 두 가지 주요 목표 :

1, 다중 레벨 데이터이므로 knockout.mapping을 사용하지만 작동하지 않습니다. 는 여기에 예입니다 http://jsfiddle.net/8uKaL/

2, 동적 소스, 자원 data2, data3, ...을 가지고, 내가 쉽게 data3에 data2에서 소스 심판을 변경할 수 있습니다 될 수있다, 그래서 내가 HTML에 <div data-bind="foreach: resources_ajax(key)" data-key="data1"> 같은 것을 사용한다고 생각.

해결책이 있습니까?

감사합니다.

Answer 1

당신은 이것에 대해 다르게 생각할 필요가 있습니다. 녹아웃은 모델을 DOM에 데이터 바인딩하는 것인데, 이는 DOM을 대신하여 업데이트 할 것이다.

예를 보여 코드 업데이트는 DOM에서 "모델을 호출"하려고하는 것처럼 당신이 보는 키 부분 :

.done(function(data) { 
     data.data1 = JSON.parse(data.data1); // this line just for fix fake ajax request 
     self.resources_ajax(data.data1); 
    }); 

JSFiddle : 당신이 필요로하는 무엇

http://jsfiddle.net/m389e/

Answer 2

빈 data1 배열을 먼저 만드는 것입니다. http://jsfiddle.net/8uKaL/4/

// this will create resources_ajax.data1 as ko.observableArray() 
self.resources_ajax = ko.mapping.fromJS({data1: []}); 

그렇지 않으면, 원래 코드에서 아약스 전에 결합하여 foreach 문에, 코는 undefined로 resources_ajax.data1을 볼 것이고, 코는 나중에 resources_ajax에 중요한 data1를 생성 결코 알지 못할 것이다.

ko가 resources_ajax.data1의 콘텐츠 변경을 관찰 할 수 있으며 resources_ajax 객체에 data1 키를 만들지 않습니다.

UPDATE

그러나 동적 사용 사례가 해결되지 않는 위의 솔루션입니다.

다음은 아약스 이후 DOM을 다시 작성하는 기술입니다. http://jsfiddle.net/8uKaL/6/

는 AJAX 전에, true에 loading 설정 AJAX 후,이 내부 결합을 다시 분석 및 재 작성 DOM에 KO 강제, false에 loading 설정하는 관찰 플래그 loading에서 DOM 랩.