javascript - KnockoutJs - 如何将数据表与现有绑定(bind)表一起使用

Question

我有一个使用 knockoutJS 绑定(bind)的简单 HTML 表格。但是，我添加了一个自定义绑定(bind)，它在表上应用了 jquery 数据表插件。

当我单击标题时，表格消失了。知道如何让它与 knockoutJS 一起工作吗？

Answer 1

其实不用knockoutJs来进行dataTable的绑定(bind)。由于 knockoutJs 已经将 HTML 表格绑定(bind)到模型，只需使用以下内容:

$(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，映射后重新创建。我必须保留对初始数据表的引用以便以后销毁...