Knoct из шаблона связывания - изменение источника данных во время выполнения и перепривязывают шаблон

Question

<script type="text/html" id="person-template"> 
 
<tr><td> 
 
     <p>Book Title: <h3 data-bind="text: Title"></h3>  
 
     <p>Available City: <span data-bind="text: CityName"></span></p> 
 
</td></tr> 
 
</script> 
 
    
 

 

 

 
jQuery(document).ready(function() { 
 
     
 
     var loData = AjaxCall('default.aspx', 'GetBookData', '10'); 
 
     var Data = JSON.parse(loData.Data); 
 
    
 
     function MyViewModel() { 
 
      this.people = Data.Table 
 
     } 
 
     ko.applyBindings(new MyViewModel()); 
 
     
 
    }); 
 
\t 
 
\t 
 
\t $("#btnChangData").click(
 
\t 
 
     var loData = AjaxCall('default.aspx', 'GetBookData', '20'); 
 
     var Data = JSON.parse(loData.Data);   
 
     
 
     ko.cleanNode($("#list")[0]); 
 
     $('#sample').empty(); 
 
     $('#sample').html('<tbody id="list" data-bind="template: { name: "person-template", foreach: people }" ></tbody>'); 
 
     function MyViewModel() { 
 
      this.people = Data.Table 
 
     } 
 
     ko.applyBindings(new MyViewModel()); 
 
\t \t 
 
\t \t);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 

 
<table id="sample"> \t \t \t \t \t 
 
<tbody id="list" data-bind="template: { name: 'person-template', foreach: people }" > 
 
</tbody>         
 
</table>

У меня есть данные о нагрузке на документ, готовый к функции таблицы. но в событии с нажатием кнопки мне нужно загрузить новый источник данных в таблицу, как можно восстановить источник данных для шаблона нокаута .. в событии click над кодом throws Скрыть код копирования Вы не можете применять привязки несколько раз к тому же элементу ошибка на консоли ..

Answer 1

i have tried below code and its worked for me, i have declare viewmodel globally 
 

 
var vm; 
 
var viewModel = function() { 
 
var self = this; 
 
this.people = ko.observableArray([]); 
 
this.updatedata = function (data) { ko.mapping.fromJS(data, {}, self.people); } }; 
 

 
and on page load 
 
vm = new viewModel(); vm.updatedata(Data.Table); ko.applyBindings(vm); 
 

 
and for data update vm.updatedata(Data)

Answer 2

Добро пожаловать в Нокаут. Теперь прекратите писать jQuery.

Вам не нужно создавать новую модель просмотра каждый раз, когда ваши данные изменяются. Ваша модель просмотра предназначена для моделирования всего вашего приложения. Вы создаете и связываете его один раз.

Ваш стол должен быть наблюдаемым, который представляет собой функцию сеттера-геттера, которая является основой нокаута. Для того, чтобы назначить новые данные в ней, вы передаете его новые данные:

viewmodel.people(Data.table) 

Если вы не прошли через Knockout tutorial, вы должны сделать это. Нокаут проще, чем вы его делаете.

Update: Ваш JavaScript должен выглядеть следующим образом:

jQuery(document).ready(function() { 

    var loData = AjaxCall('default.aspx', 'GetBookData', '10'); 
    var Data = JSON.parse(loData.Data); 

    function MyViewModel() { 
    var self = this; 
    this.people = Data.Table; 
    this.changeData = function() { 
     var loData = AjaxCall('default.aspx', 'GetBookData', '20'); 
     var Data = JSON.parse(loData.Data); 
     self.people(Data.Table); 
    }; 
    } 
    ko.applyBindings(new MyViewModel()); 

});