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

不过，我需要加载从AJAX的数据，并且响应是JSON。

这临危上创建数据模型：

 函数CustomerPageModel（数据）
{
  如果（！数据）
  {
    数据= {};
  }

  无功自我=这一点;
  self.customers = ExtractModels（个体经营，data.customers，CustomerModel）;

  VAR过滤器= [
    {
      类型：文本，
      产品名称：姓名，
      值：ko.observable（），
      RecordValue：功能（记录）{返回record.name; }
    }，
    {
      类型：中选择
      产品名称：状态，
      选项​​：
        GetOption（全部，全部，空）
        GetOption（无，无，无），
        GetOption（新，新，新），
        GetOption（最近修改的，最近修改的，最近修改）
      ]
      CurrentOption：ko.observable（），
      RecordValue：功能（记录）{返回record.status; }
    }
  ]。
  VAR sortOptions = [
    {
      名称：ID，
      价值：ID，
      排序：函数（左，右）{返回left.id＆LT; right.id; }
    }，
    {
      产品名称：姓名，
      价值：姓名，
      排序：函数（左，右）{返回CompareCaseInsensitive（left.name，right.name）; }
    }，
    {
      产品名称：状态，
      值：状态，
      排序：函数（左，右）{返回CompareCaseInsensitive（left.status，right.status）; }
    }
  ]。
  self.filter =新FilterModel（过滤​​器，self.customers）;
  self.sorter =新SorterModel（sortOptions，self.filter.filteredRecords）;
  self.pager =新PagerModel（self.sorter.orderedRecords）;
}
 

结合效果很好，如果我为事件只是回声JSON值 然而，当我把我的AJAX功能和新数据添加，该模型将不会更新。

  VAR数据= {
  动作：load_data
};
jQuery.post（ajaxurl，数据，函数（响应）{
  变种JSON = JSON.parse（响应）;
  VAR模型= ExtractModels（_customerPageModel，JSON，CustomerModel）;
  _customerPageModel.customers =模型;
}）;
 

解决方案

现在的问题是你的替换的 _customerPageModel.customers 变量。

淘汰赛数据绑定使用一些特殊性质的作品 - 观测和 observableArray 取值

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

因此​​，你应该把你的客户成observableArray，并推动它，当你有新的数据。例如：

 函数CustomerPageModel（数据）
{
  （...）
  无功自我=这一点;
  self.customers = ko.observableArray（ExtractModels（个体经营，data.customers，CustomerModel））;
  （...）
}
 

和接收数据时：

  VAR数据= {
  动作：load_data
};
jQuery.post（ajaxurl，数据，函数（响应）{
  变种JSON = JSON.parse（响应）;
  VAR模型= ExtractModels（_customerPageModel，JSON，CustomerModel）;
  _customerPageModel.customers.push.apply（_customerPageModel.customers，型号）;
}）;
 

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

请注意，我现在用的是推方法，所有新数据添加到数组的末尾。你可能希望完全覆盖阵列。如果是这样，这是更简单：

  _customerPageModel.customers（型号）;
 

在这种方式，你的客户阵列被替换为新的模式阵列。

I'm currently creating a list of items with pager and filter. The base I used is this: http://jsfiddle.net/JTimperley/pyCTN/13/

But I need to load the data from AJAX, and the response is JSON.

The model which recieves the data on creation:

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);
}

The binding works well if I simply echo json value for events However, when I call my AJAX-function and new data is added, the model won't update.

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;
});

The problem is you are replacing the _customerPageModel.customers variable.

Knockout data-binding works by using some special properties - observables and observableArrays.

Anything that you need to be bound to the DOM must be observable.

Therefore, you should probably transform your customers into a observableArray, and push to it when you have new data. For example:

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

And when receiving data:

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);
});

Take a look at the observableArray docs: http://knockoutjs.com/documentation/observableArrays.html

Note that I am using the push method to add all new data to the end of the array. You may wish to completely overwrite the array. If so, it's even simpler:

_customerPageModel.customers(models);

In this way, your customers array is replaced by the new models array.