동적 뷰 모델

Question

Ajax를 통해 리턴 된 JS 오브젝트로부터 어떻게 동적 뷰 모델을 작성합니까?

관찰 가능 객체 및 관찰 가능 어레이를 만들 때마다 get이 끝날 때마다 바인딩되지 않으면 뷰에 데이터가 포함되지 않으므로 경고가 여러 번 바인딩됩니다.

내 JS

var SummaryData = { 
    Summary: { 
    Count: 4 
    } 
}; 

var DetailsData = { 
    Status: [{ 
    Name: "One", 
    Type: 1 
    }, { 
    Name: "Two", 
    Type: 1 
    }, { 
    Name: "Three", 
    Type: 0, 
    Taco: "True" 
    }] 
}; 
var self = this; 
self.Summary = new ko.observableArray([]); 
self.Details = ko.observable(); 
self.Load = function() { 

$.ajax({ 
     url: "/echo/json/", 
     data: SummaryData, 
     type: "GET", 
     success: function (data) { 
     // Map the returned JSON to the View Model 
     self.Summary = ko.mapping.fromJS(data.Summary); 
     } 
}) 
$.ajax({ 
     url: "/echo/json/", 
     data: DetailsData, 
     type: "GET", 
     success: function (data) { 
     // Map the returned JSON to the View Model 
     self.Details = ko.mapping.fromJS(data.Status); 
     } 
}) 

내 HTML :

<span data-bind="text: Summary.Count"></span> 
<table data-bind="foreach: Details"> 
    <tr> 
     <td data-bind="text: Name"></td> 
     <td><button data-bind="click: $root.Clicked"></button></td> 
    </tr> 
</table> 

의 핵심은 관찰 가능한을 초기화하고 신중 바인딩을 사용하는 것입니다

http://jsfiddle.net/atwoodkevin/q8EKP/40/

Answer 1

(예 : with, if, 그리고 foreach) 그 는 null 값이 관찰 가능에 설정 될 때까지 하위 요소를 바인딩하지 않습니다. AJAX를 통해 데이터를 얻었을 때, 다시 정의하는 대신 관찰 가능 항목을 설정합니다 (() 형식 사용).

당신이 View.Load()ko.applyBindings을로 통과하기 때문에 (즉 대상에 포함되지 않음) 매핑 직선 배열은 빈 배열 ko.mapping를 호출하고 ko.mapping.fromJS(data.Status, self.Details)

다른 두 점 매핑을 업데이트하여 초기화, 약간 다르게 처리 할 수 ​​있습니다 그 방법에서 ViewModel을 반환해야합니다.

Clicked 처리기는 ViewModel 안에 있어야합니다. http://jsfiddle.net/jearles/q8EKP/43/

: -

여기

가 작동하는 바이올린입니다