1

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

4

1 回答 1

1

关键是初始化可观察对象并明智地使用绑定（例如with、if和foreach），在可观察对象中设置非空值之前不会绑定子元素。当您通过 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-16T12:27:17.920 回答