动态视图模型

如何从通过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

动态视图模型

回答

相关问题