提取数据后淘汰数据表行

问题描述

我有一个视图模型，该模型通过剔除绑定到模式弹出窗口。模态中有一个按钮，用于获取数据（实际上是从服务器获取的ajax，但对于本示例来说只是从一些静态代码获取），然后将该数据绑定到表并将其转换为DataTable。淘汰赛将添加数据表。

获取数据并正确呈现数据表。但是，我需要能够通过单击它们来选择行，并且看起来这些databind语句在获取数据后没有得到处理。

这是HTML：

<a href="#" class="btn btn-default" data-bind="click: initArray">Init Table</a>
<a href="#" class="btn btn-default" data-bind="click: swapArray">Swap Table Array</a>
<div id="datatablescontainer" style="border: 1px solid green;"></div>

<div id="datatableshidden" style="display:none;" >
    <table class="datatable">
        <thead>
        <tr>
                <th>first</th>
          <th>last</th>
        </tr>
        </thead>            
        <tbody data-bind="foreach: rows">
            <tr data-bind="click: $parent.testAlert">
                <td align="center" data-bind="text: firstName"></td>
          <td align="center" data-bind="text: lastName"></td>
             </tr>
        </tbody>
    </table>
</div>

这是脚本：

// Here's my data model
var viewmodel = function() {
    this.rows = ko.observable(null);
    this.datatableinstance = null;
    
    this.initArray = function() {
            var rowsource1 =  [   
                    new ChildVM({ "firstName" : "John","lastName" : "Smith"}),new ChildVM({ "firstName" : "Mary","lastName" : "Smith" })
                  ];         
        this.redraw(rowsource1);

    }

    this.swapArray = function() {
      var rowsource2 =  [   
                      new ChildVM({ "firstName" : "James","lastName" : "Smith" }),new ChildVM({ "firstName" : "Alice",new ChildVM({ "firstName" : "Doug","lastName" : "Smith" })
                    ];       
        this.redraw(rowsource2);
    }

    this.redraw = function(rowsource) {
      this.rows(rowsource);


      var options = { paging: false,"order": [[0,"desc"]],"searching":true };
      var datatablescontainer = $('#datatablescontainer');
      var html = $('#datatableshidden').html();

      //Destroy datatable
      if (this.datatableinstance) {
        this.datatableinstance.destroy();
        datatablescontainer.empty();
      }

      //Recreate datatable
      datatablescontainer.html(html);
      this.datatableinstance = datatablescontainer.find('table.datatable').DataTable(options);    
    }
    
   this.testAlert = function() {
        alert('test');
    }
    
};
 
var ChildVM = function(data) {
    var self = this;
  if(data != null)
  {
    self.firstName = data.firstName;
    self.lastName = data.lastName;
  }
  
  this.testAlert = function() {
        alert('test');
    }
}
 
ko.applyBindings(new viewmodel()); // This makes Knockout get to work

这是一个小提琴（为此问题从另一篇文章中定制）。

*更新小提琴 https://jsfiddle.net/websitewill/rgsw2odp/17/

我在主VM和ChildVM上都有testClick。我已经尝试过$ parent.testClick，只是在表行databind中使用testClick。都不会被调用（但也不会报告错误）。

感谢您的帮助。会

解决方法

弄清楚了。看起来就像在加载新结果并创建DataTable之后在applyBindings之前调用cleanNode一样。

ko.cleanNode(dataTableContainer.find('table.definitions-datatable')[0]);
ko.applyBindings(this,dataTableContainer.find('table.definitions-datatable')[0]);

此处更新了小提琴：https://jsfiddle.net/websitewill/rgsw2odp/35/

谢谢，会

datatables knockout-mvc knockout.js