Question

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

Answer 1

关键是初始化observable并明智地使用不绑定子元素的绑定（例如with，if和foreach），直到设置了非null值为止在可观察的。当您通过AJAX获取数据时，设置observable（使用（）形式），而不是重新定义。映射直接数组（即未嵌入在对象中）的处理方式可能略有不同，通过使用空数组调用ko.mapping进行初始化，然后使用ko.mapping.fromJS(data.Status, self.Details)更新映射

另外两点：

由于您将View.Load()传递给ko.applyBindings，您必须从该方法返回ViewModel。

您的Clicked处理程序应位于ViewModel中。

-

这是一个功能正常的小提琴：http://jsfiddle.net/jearles/q8EKP/43/

动态视图模型

1 个答案: