2

我已将 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 链接）

4

2 回答 2

2

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

但是，如果您真的想使用 Datatables，则可以使用它准备好淘汰绑定（仅适用于 1.9.0）

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

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

于 2012-11-29T10:01:13.940 回答
1

这就是这样做的方法......我做了一个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

于 2015-09-22T17:51:45.327 回答