Knockout 模板绑定 - 在运行时更改数据源并重新绑定模板答案

【问题标题】：Knoct out template binding - changing datasource at runtime and rebind templateKnockout 模板绑定 - 在运行时更改数据源并重新绑定模板
【发布时间】：2016-02-21 04:30:49
【问题描述】：

<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>

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

【问题讨论】：

标签： templates knockout.js knockout-2.0

【解决方案1】：

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

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

您的表应该是一个 observable，它是一个 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());

});

【讨论】：

全局声明 var viewModel = { people: ko.observableArray([]) } on Pageload : viewModel.people = Data.Table; ko.applyBindings(viewModel);点击事件：var Data = JSON.parse(loData.Data); viewModel.people(Data.table);在页面加载其绑定正确但在点击事件我有更新视图模型人员数据的更新但仍然 html 未与新数据绑定
不要重新分配viewModel.people，设置其内容：viewModel.people(Data.Table)
我做到了，但仍然没有重新绑定 html
感谢您对 Roy J 的支持，我尝试了下面的代码，它对我有用，我已经在全局声明了 viewmodel var vm; var viewModel = function () { var self = this; this.people = ko.observableArray([]); this.updatedata = function (data) { ko.mapping.fromJS(data, {}, self.people); } };并在页面加载 vm = new viewModel(); vm.updatedata(Data.Table); ko.applyBindings(vm);用于数据更新 vm.updatedata(Data)

【解决方案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)

【讨论】：