動態視圖模型

如何從通過Ajax返回的JS對象構建動態視圖模型？動態視圖模型

創建可觀察對象和可觀察數組時，該視圖不包含任何數據，除非在每次獲取後綁定，導致警報多次綁定。

我的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/

來源

2013-01-16 user1959772

的關鍵是初始化觀測和明智地使用綁定（如with，if和foreach），其將不會綁定子元素，直到observable中設置一個非空值。當通過AJAX獲取數據時，設置observables（使用（）表單），而不是重新定義。映射直陣列（即未嵌入的對象）可以稍微不同的方式處理，通過調用ko.mapping與空數組，然後用ko.mapping.fromJS(data.Status, self.Details)

其他兩個點更新映射初始化：

由於傳遞View.Load()成ko.applyBindings您必須從該方法返回您的ViewModel。

你的Clicked處理程序應該在ViewModel中。

這是一個正常運作的小提琴：http://jsfiddle.net/jearles/q8EKP/43/

來源

2013-01-16 12:27:17

動態視圖模型

回答

相關問題