JQuery的数据表+敲除（+自举）的错误？(JQuery DataTables + KnockOu

I have bound a KnockOut observableArray to a jQuery DataTable. When I dynamically add items to this array, the new items are correctly being rendered in the table, however some options of the datatable itself are not being refreshed. The pager doesn't get updated. Also the "no data available" message does not disappear.

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>

Knockout model:

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 ready:

$(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"
        }
    });
});

Working JSFiddle: http://jsfiddle.net/PhpDk/1

Am I doing something wrong, or is this a bug?

Thanks, Nico

(edit: fixed CDN links in jsfiddle)

Answer 1:

有一个叫原生淘汰赛电网KoGrid https://github.com/ericmbarnard/KoGrid

但是，如果你真的想用数据表有一个准备去淘汰赛它（它的工作原理，只有1.9.0）结合

我已付出的是在Github上绑定和扩展它有点（您可以从视图模型访问Datables对象刷新，筛选，排序等），你可以在这里找到

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

Answer 2:

这是做它的方式......我已经显示这一个的jsfiddle：

为了得到这个工作，我有两个回调方法添加到原来的淘汰赛的foreach绑定定义。 目前我正在试图让这些事件进入淘汰赛的最新版本。 我需要添加一个beforeRenderAll和afterRenderAll回调摧毁DataTable，并重新初始化数据表后击倒的foreach绑定添加HTML。 这就像一个魅力的jsfiddle显示这有通过淘汰赛绑定到视图模型完全可编辑的jQuery的数据表。

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 /引导

文章来源: JQuery DataTables + KnockOut (+ BootStrap) bug?