如何刷新与 Knockout 绑定的 Footable？

Question

我创建了一个演示我的问题的 plunk：http://plnkr.co/edit/2UMTW2p0UAWPzJ0d0m5F?p=info

我有一个使用 Knockout.js ForEach 绑定的表。通过在正常位置调用 .footable() 初始化程序不起作用。我为footable 创建了一个自定义活页夹，并将调用$(element).footable();。这会导致 footable 初始化，但因为这发生在自定义活页夹的 init 中，所以在之后添加了更多行，因此表格看起来不正确。我在客户活页夹中有一个更新功能，但我不知道要为 valueAccessor 设置什么，所以它会在正确的时间被调用。 （或根本）理想情况下，我希望它使用用于构建表的相同可观察数组。

我将 afterRender 添加到 ForEach 并帮助了一些，但这需要我在我的 ViewModel 中添加适合的逻辑。

所以，我真正想做的是弄清楚我需要使用什么属性，以便自定义活页夹的更新回调起作用，这样我就可以将所有可脚逻辑封装到自定义活页夹中。

Answer 1

一种方法是将 foreach 替换为 footable 绑定。 footable 绑定会监听 observableArray 的变化并自动添加 foreach 绑定

ko.bindingHandlers.footable = {
    init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
        $(element).closest("table").footable();
    },
    update: function(element, valueAccessor) {  
        //this is called when the observableArray changes
        //and after the foreach has rendered the contents       
        ko.unwrap(valueAccessor()); //needed so that update is called
        $(element).closest("table").trigger('footable_redraw');
    }
}

ko.bindingHandlers.footable.preprocess = function(value, name, addBindingCallback) {
    //add foreach binding
    addBindingCallback('foreach', '{ data: ' + value +  '}');
    return value;
}

用法：

<tbody data-bind = "footable: items, delegatedHandler: 'click'" >

查看http://plnkr.co/edit/Gr4DefuWcPAcVBHRyIvJ?p=preview的变化