jquery数据表的自定义ko绑定

我在knockout.js.中使用了jquery dataTable，在那里我使用remove link从函数中生成数据行。它将删除行表格以及可观察数组。remove链接工作一次并从表中删除行，但当我尝试删除另一个他们不会删除它。jquery数据表的自定义ko绑定

在这里，您可以检查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);

}）;

来源

2016-05-15 Waqas Ahmed

看起来像你刚才的问题的重复：[knouckout JS和jQuery数据表（http://stackoverflow.com/questions/37230475/knouckout-js-和jQuery的数据表）？请注意，您可以通过编辑来改善原始问题，这会将其置于队列中重新打开。 – Jeroen

这是一个[插件]（http://jmvtrinidad.github.io/knockout-datagrid/），您可以使用它来操作表格。 – janmvtrinidad

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

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

您的按钮使用click绑定工作。对于click绑定工作，淘汰赛已到applyBindings。

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

return { controlsDescendantBindings: true };

在你update方法，手工绑定应用：

ko.applyBindingsToDescendants(viewModel, element);

这可以确保您的click绑定将重新工作。

这是你的例子添加了此代码：http://jsfiddle.net/5t15rhyq/

来源

2016-05-17 15:18:41 user3297291

jquery数据表的自定义ko绑定

回答

相关问题