KnockoutJs - 如何使用現有綁定表的數據表

Question

我有一個簡單的HTML表，它使用knockoutJS綁定。不過，我已經添加了一個自定義綁定，它將jQuery數據表插件應用於表格。

當我點擊標題時，表格消失。任何想法如何能讓它與knockoutJS合作？

Answer 1

它實際上沒有必要使用knockoutJs來執行dataTable的綁定。作爲knockoutJs已經綁定HTML表到模型，只需使用以下命令：

$(function() { 
     var dtOptions = { 
       "bPaginate": false, 
       "bLengthChange": false, 
       "bFilter": false, 
       "bInfo": false, 
       bJQueryUI: true    
     } 

     var dt = $("#leadsTable").dataTable(dtOptions); 

     $("#searchButton").click(function() { 
      //... set url with search terms... 

      $.get(url, function (data) { 
       // destroy existing table 
       dt.fnDestroy(); 

       ko.mapping.fromJS(data, vm.model); 

       // re-created AFTER ko mapping 
       dt.dataTable(dtOptions);      
      }); 
     }) 
}); 

var serialisedModel = @Html.Raw(new JavaScriptSerializer().Serialize(Model)); 

var vm = {  
    data: ko.toJSON(serialisedModel), 
} 

ko.applyBindings(vm); 

的關鍵部分是映射之前破壞現有的dataTable和映射後重新創建。我不得不引用保持初始的dataTable供以後摧毀...

Answer 2

這是做它的方式......我已經做了的jsfiddle顯示此：

這是淘汰賽自定義綁定解決方案jQuery數據表。

ko.bindingHandlers.dataTablesForEach = { 
page: 0, 
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
    var options = ko.unwrap(valueAccessor()); 
    ko.unwrap(options.data); 
    if(options.dataTableOptions.paging){ 
    valueAccessor().data.subscribe(function (changes) { 
     var table = $(element).closest('table').DataTable(); 
     ko.bindingHandlers.dataTablesForEach.page = table.page(); 
     table.destroy(); 
    }, null, 'arrayChange');   
    } 
    var nodes = Array.prototype.slice.call(element.childNodes, 0); 
    ko.utils.arrayForEach(nodes, function (node) { 
     if (node && node.nodeType !== 1) { 
      node.parentNode.removeChild(node); 
     } 
    }); 
    return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext); 
}, 
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {   
    var options = ko.unwrap(valueAccessor()), 
     key = 'DataTablesForEach_Initialized'; 
    ko.unwrap(options.data); 
    var table; 
    if(!options.dataTableOptions.paging){ 
     table = $(element).closest('table').DataTable(); 
     table.destroy(); 
    } 
    ko.bindingHandlers.foreach.update(element, valueAccessor, allBindings, viewModel, bindingContext); 
    table = $(element).closest('table').DataTable(options.dataTableOptions); 
    if (options.dataTableOptions.paging) { 
     if (table.page.info().pages - ko.bindingHandlers.dataTablesForEach.page == 0) 
      table.page(--ko.bindingHandlers.dataTablesForEach.page).draw(false);     
     else 
      table.page(ko.bindingHandlers.dataTablesForEach.page).draw(false);     
    }   
    if (!ko.utils.domData.get(element, key) && (options.data || options.length)) 
     ko.utils.domData.set(element, key, true); 
    return { controlsDescendantBindings: true }; 
}}; 

JSFiddle w/ jqueryUI