jquery数据表的自定义ko绑定

custom ko binding for jquery data tables

本文关键字：ko 绑定 自定义 数据表 jquery      更新时间：2023-09-26

我在knockout.js中使用了jquery dataTable。因为我从带有remove链接的函数生成数据行。它将删除表中的行以及可观察数组中的行。删除链接工作一次，并从表中删除行，但当我试图删除另一行时，他们不会删除它。

在这里你可以查看http://jsfiddle.net/zongweil/PLUKv/1/

$(document).ready(function () {
/* Custom binding */
ko.bindingHandlers.dataTable = {
    init: function (element, valueAccessor) {
        var binding = ko.utils.unwrapObservable(valueAccessor());
        // If the binding is an object with an options field,
        // initialise the dataTable with those options. 
        if (binding.options) {
            $(element).dataTable(binding.options);
        }
    },
    update: function (element, valueAccessor) {
        var binding = ko.utils.unwrapObservable(valueAccessor());
        // If the binding isn't an object, turn it into one. 
        if (!binding.data) {
            binding = {
                data: valueAccessor()
            };
        }
        // Clear table
        $(element).dataTable().fnClearTable();
        // Rebuild table from data source specified in binding
        $(element).dataTable().fnAddData(binding.data());
    }
};

/* Object code */
function GroupMember(id, name, isGroupLeader) {
    var self = this;
    self.id = id;
    self.name = name;
    self.isGroupLeader = ko.observable(isGroupLeader);
    self.link = ko.computed(function () {
        return "/#user/" + self.id;
    });
    self.nameWithLink = ko.computed(function () {
        return '<a href="' + self.link() + '">' + self.name + '</a>';
    });
    self.actions = ko.computed(function () {
        return '<a class="btn btn-danger" data-bind="click: function() {removeMember(' + self.id + ')}">' + '<i class="icon-minus-sign"></i>' + '</a>';
    });
}
/* View model */
var groupViewModel = {
    groupMembers: ko.observableArray([
    new GroupMember("1", "Abe", true),
    new GroupMember("2", "Bob", false),
    new GroupMember("3", "Bill", false)])
};
groupViewModel.membersTable = ko.computed(function () {
    var self = this;
    var final_array = new Array();
    for (var i = 0; i < self.groupMembers().length; i++) {
        var row_array = new Array();
        row_array[0] = self.groupMembers()[i].nameWithLink();
        row_array[1] = self.groupMembers()[i].actions();
        final_array.push(row_array);
    }
    return final_array;
}, groupViewModel);
groupViewModel.removeMember = function (id) {
    var self = this;
    self.groupMembers.remove(function (groupMember) {
        return groupMember.id == id;
    });
};
ko.applyBindings(groupViewModel);

})；

当您在自定义绑定的update函数中调用fnClearTable时，您可以在knockout后面清除DOM的一部分。

然后通过调用fnAddData添加新的DOM元素。

您的按钮使用click绑定工作。为了使click结合起作用，敲除必须是applyBindings。

如果您想继续使用dataTable和click绑定来处理DOM，那么每次进行更改时都必须手动应用绑定。在init方法中，让knockout知道您正在处理后代绑定：

return { controlsDescendantBindings: true };

在update方法中，手动应用绑定：

ko.applyBindingsToDescendants(viewModel, element);

这样可以确保click绑定将再次工作。

以下是添加了此代码的示例：http://jsfiddle.net/5t15rhyq/

相关文章：