пользовательская привязка ko для таблиц данных jquery

Question

Я использовал данные jquery dataTable в knockout.js.In, что я генерирую строки данных из функции с удалением ссылки. Он будет удалять таблицу форм строки, а также вид наблюдаемого массива. Удаление ссылки работает один раз и удалите строку из таблицы, но когда я пытаюсь удалить другую, они не удаляют ее.

Здесь вы можете проверить 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); 

});

Answer 1

Когда вы вызываете fnClearTable в функцию пользовательского привязки update, вы очищаете часть своей DOM за спиной нокаута.

Затем вы добавляете новые элементы DOM, вызывая fnAddData.

Ваши кнопки работают, используя привязку click. Для привязки click к работе нокаут имеет значение applyBindings.

Если вы хотите продолжать использовать привязку dataTable и click для работы с DOM, вам придется вручную применять привязки при каждом изменении. В вашем методе init, пусть Нокаут знает, что вы заботиться о потомках привязок:

return { controlsDescendantBindings: true }; 

В вашем методе update, применяются привязки вручную:

ko.applyBindingsToDescendants(viewModel, element); 

Это гарантирует, что ваши click привязок будут работать снова ,

Вот ваш пример с добавленным этот код: http://jsfiddle.net/5t15rhyq/