Нокаут-нагрузка JSON от звонка AJAX

Question

В настоящее время я создаю список элементов с пейджером и фильтром. Основание, которое я использовал: http://jsfiddle.net/JTimperley/pyCTN/13/

Но мне нужно загрузить данные из AJAX, а ответ - JSON.

модель, которая recieves данные о создании:

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

связывания хорошо работает, если я просто эхо значение JSON для events Однако, когда я называю мой 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 и observableArray s.

Все, что необходимо для связи с DOM, должно быть наблюдаемым.

Следовательно, вероятно, вы должны преобразовать customers в наблюдаемый массив и нажать на него, когда у вас есть новые данные. Например:

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 массива.