2

私の問題を示すプランクを作成しました: http://plnkr.co/edit/2UMTW2p0UAWPzJ0d0m5F?p=info

Knockout.js ForEach を使用してバインドされたテーブルがあります。.footable() イニシャライザの呼び出しは、通常の場所で呼び出しても機能しません。Footable 用のカスタム バインダーを作成し、$(element).footable(); を呼び出します。これによりフッタブルが初期化されますが、これはカスタム バインダーの初期化で発生するため、その後にさらに行が追加され、テーブルが正しく表示されません。顧客バインダーに更新機能がありますが、正しい時間に呼び出されるように valueAccessor に何を設定すればよいかわかりません。（またはまったく）理想的には、テーブルの構築に使用されるのと同じ監視可能な配列を使用したいと思います。

ForEach に afterRender を追加すると、一部は役に立ちましたが、ViewModel にフッタブル ロジックを追加する必要があります。

それで、私が本当にやりたいことは、使用する必要があるプロパティを見つけて、カスタム バインダーの update コールバックが機能し、すべてのフッタブル ロジックをカスタム バインダーにカプセル化できるようにすることです。

4

1 に答える 1

1

1 つの方法は、foreach をフッタブル バインディングに置き換えることです。フッタブル バインディングは、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の変更を参照してください。

于 2013-12-28T05:37:14.783 に答える