从 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 变量。

Knockout 数据绑定通过使用一些特殊属性来工作 - 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数组替换了。

从 AJAX 调用中剔除负载 JSON

Knockout load JSON from AJAX call

ajax

wordpress

pagination

filter

knockout.js