敲除模板绑定 - 在运行时更改数据源并重新绑定模板

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()); 
       
    });
 
 
 $("#btnChangData").click(
 
        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());
  
  );

<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">     
<tbody id="list" data-bind="template: { name: 'person-template', foreach: people }" >
</tbody>                                
</table>

我已将文档就绪功能的数据加载到 table。但是在按钮单击事件中我需要将新数据源加载到 table，如何将数据源重新绑定到挖空模板。在上面的代码抛出的单击事件中隐藏复制代码您不能对同一个元素多次应用绑定控制台错误..

Answer 1

欢迎来到淘汰赛。现在请停止写 jQuery.

您不需要在每次数据更改时都创建新的视图模型。您的视图模型旨在为您的整个应用程序建模。您创建并绑定一次。

您的 table 应该是一个可观察对象，它是一个 setter-getter 函数，它是 Knockout 的基础。要为其分配新数据，请将新数据传递给它：

viewmodel.people(Data.table)

如果您还没有通过 Knockout tutorial，您应该这样做。淘汰赛比你成功更容易。

更新：您的 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());

});

Answer 2

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)

敲除模板绑定 - 在运行时更改数据源并重新绑定模板

Knoct out template binding - changing datasource at runtime and rebind template

templates

knockout-2.0

knockout.js