从 AJAX 调用中剔除加载 JSON

Question

我目前正在使用寻呼机和过滤器创建项目列表。 我使用的基础是这样的：http://jsfiddle.net/JTimperley/pyCTN/13/

但我需要从 AJAX 加载数据，响应是 JSON。

接收创建数据的模型：

function CustomerPageModel(data)
{
  if (!data)
  {
    data = {};
  }

  var self = this;
  self.customers = ExtractModels(self, data.customers, CustomerModel);

  var filters = [
    {
      Type: "text",
      Name: "Name",
      Value: ko.observable(""),
      RecordValue: function(record) { return record.name; }
    },
    {
      Type: "select",
      Name: "Status",
      Options: [
        GetOption("All", "All", null),
        GetOption("None", "None", "None"),
        GetOption("New", "New", "New"),
        GetOption("Recently Modified", "Recently Modified", "Recently Modified")
      ],
      CurrentOption: ko.observable(),
      RecordValue: function(record) { return record.status; }
    }
  ];
  var sortOptions = [
    {
      Name: "ID",
      Value: "ID",
      Sort: function(left, right) { return left.id < right.id; }
    },
    {
      Name: "Name",
      Value: "Name",
      Sort: function(left, right) { return CompareCaseInsensitive(left.name, right.name); }
    },
    {
      Name: "Status",
      Value: "Status",
      Sort: function(left, right) { return CompareCaseInsensitive(left.status, right.status); }
    }
  ];
  self.filter = new FilterModel(filters, self.customers);
  self.sorter = new SorterModel(sortOptions, self.filter.filteredRecords);
  self.pager = new PagerModel(self.sorter.orderedRecords);
}

如果我简单地回显 events 的 json 值，则绑定效果很好 但是，当我调用我的 AJAX 函数并添加新数据时，模型不会更新。

var data = {
  action: 'load_data'
};
jQuery.post(ajaxurl, data, function(response) {
  var json = JSON.parse(response);
  var models = ExtractModels(_customerPageModel, json, CustomerModel);
  _customerPageModel.customers = models;
});

Answer 1

问题是您要替换 _customerPageModel.customers 变量。

敲除数据绑定通过使用一些特殊属性来工作 - observables 和 observableArrays。

任何需要绑定到 DOM 的东西都必须是可观察的。

因此，您可能应该将您的customers 转换为 observableArray，并在您有新数据时推送到它。例如：

function CustomerPageModel(data)
{
  (...)    
  var self = this;
  self.customers = ko.observableArray(ExtractModels(self, data.customers, CustomerModel));
  (...)
}

以及接收数据时：

var data = {
  action: 'load_data'
};
jQuery.post(ajaxurl, data, function(response) {
  var json = JSON.parse(response);
  var models = ExtractModels(_customerPageModel, json, CustomerModel);
  _customerPageModel.customers.push.apply(_customerPageModel.customers, models);
});

查看 observableArray 文档：http://knockoutjs.com/documentation/observableArrays.html

请注意，我使用push 方法将所有新数据添加到数组的末尾。您可能希望完全覆盖数组。如果是这样，那就更简单了：

_customerPageModel.customers(models);

这样，您的customers 数组将被新的models 数组替换。