JQuery DataTables + KnockOut (+ BootStrap) 错误？答案

【问题标题】：JQuery DataTables + KnockOut (+ BootStrap) bug?JQuery DataTables + KnockOut (+ BootStrap) 错误？
【发布时间】：2012-11-17 07:41:32
【问题描述】：

我已将 KnockOut observableArray 绑定到 jQuery DataTable。当我将项目动态添加到此数组时，新项目会正确地呈现在表中，但是数据表本身的某些选项不会被刷新。寻呼机没有得到更新。 “无可用数据”消息也不会消失。

HTML：

<table class="table table-striped" id="tblSample">
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>

    <tbody data-bind="foreach: List">
        <tr>
            <td data-bind="text: Name"></td>
        </tr>
    </tbody>
</table>
<button class="btn" type="button" data-bind="click: AddSample">Test</button>

淘汰模型：

var Sample = function(name) {
    this.Name = ko.observable(name);
};

var ViewModel = function() {
    var self = this;
    self.List = ko.observableArray();
    self.AddSample = function() {
        self.List.push(new Sample('New'));
    };
};

ko.applyBindings(new ViewModel());

DOM 准备就绪：

$(document).ready(function() {

    $('#tblSample').dataTable({
        "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
        "sPaginationType": "bootstrap",
        "bFilter": true,
        "bLengthChange": false,
        "bSort": true,
        "iDisplayLength": 15,
        "oLanguage": {
            "sLengthMenu": "_MENU_ records per pagina"
        }
    });
});

工作 JSFiddle：http://jsfiddle.net/PhpDk/1

是我做错了什么，还是这是一个错误？

谢谢，妮可

（编辑：jsfiddle 中的固定 CDN 链接）

【问题讨论】：

标签： jquery twitter-bootstrap knockout.js datatables

【解决方案1】：

有一个名为 KoGrid 的本地淘汰赛网格 https://github.com/ericmbarnard/KoGrid

但如果你真的想使用 Datatables，有一个准备好的淘汰绑定（它仅适用于 1.9.0）

我已经在 Github 上分叉了该绑定并对其进行了一些扩展（您可以从 ViewModel 访问 Datables 对象以刷新、过滤、排序等），您可以在此处找到它

https://github.com/AndersMalmgren/Knockout.Extensions

【讨论】：

我为一个 KO 2.3 项目工作，使用 1.9.0 数据表，没有尝试使用 KO 3

【解决方案2】：

这就是这样做的方法......我做了一个 jsfiddle 来展示这个：

为了让它工作，我必须在原始的淘汰赛 foreach 绑定定义中添加两个回调方法。我目前正在尝试将这些事件纳入最新版本的淘汰赛。我需要添加一个 beforeRenderAll 和 afterRenderAll 回调来销毁数据表并在敲除 foreach 绑定添加 html 后重新初始化数据表。这就像一个魅力展示这个的 JSFiddle 有一个完全可编辑的 jquery 数据表，通过敲除绑定到 ViewModel。

ko.bindingHandlers.DataTablesForEach = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
    return ko.bindingHandlers.foreach.init(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext);
},
update: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {

        var value = ko.unwrap(valueAccessor()),
        key = "DataTablesForEach_Initialized";

        var newValue = function () {
            return {
                data: value.data || value,
                beforeRenderAll: function(el, index, data){
                    if (ko.utils.domData.get(element, key)) {                                   
                        $(element).closest('table').DataTable().destroy();
                    }
                },
                afterRenderAll: function (el, index, data) {
                    $(element).closest('table').DataTable(value.options);
                }

            };
        };

        ko.bindingHandlers.foreach.update(element, newValue, allBindingsAccessor, viewModel, bindingContext);

        //if we have not previously marked this as initialized and there is currently items in the array, then cache on the element that it has been initialized
        if (!ko.utils.domData.get(element, key) && (value.data || value.length)) {
            ko.utils.domData.set(element, key, true);
        }

        return { controlsDescendantBindings: true };
}

};

jsfiddle w/ bootstrap

【讨论】：