淘汰赛和数据表ScrollY是否中断绑定？

问题描述

谁能解释为什么在数据表上启用ScrollY选项似乎破坏了敲除中的TR Click处理程序绑定？看这个小提琴。如果取消注释第31行，然后单击一行，则不会获得单击处理程序生成的警报。 https://jsfiddle.net/websitewill/rgsw2odp/41/

关闭该选项似乎也会导致所有行都重复。我已经看过小提琴生成的标记，除了重复的数据行外，它们是相似的（我想DataTables这样做是为了方便滚动吗？）。还可以看到宽度管理的一些差异，但是所有数据绑定的东西都在所有节点上，所以我认为敲除仍然可以看到它。

代码如下：

<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: true,searching: true,//scrollY: "200px",//enable this to see if break
            scrollCollapse: true,pagingType: "full_numbers"
        };
      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);    
      ko.cleanNode(datatablescontainer.find('table.datatable')[0]);
      ko.applyBindings(this,datatablescontainer.find('table.datatable')[0]);
    }
    
   this.testAlert = function() {
        alert('clicked');
    }
    
};

var ChildVM = function(data) {
    var self = this;
  if(data != null)
  {
    self.firstName = data.firstName;
    self.lastName = data.lastName;
  }
}
 
ko.applyBindings(new viewmodel()); // This makes Knockout get to work

感谢您提供任何信息，会

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

datatables knockout.js