7

Knockout が DOM に html を追加してレンダリングを終了した後にカスタム コードを実行する方法はありますか? ネストされたビュー モデルを動的に追加された html コードにバインドできるように、これが必要です。

何かのようなもの： 

<div data-bind="html: dynamicHtml, afterRender: customCode"></div>

...

MyViewModel.prototype.customCode = function(){
    ko.applyBindings(self.MyInnerViewModel(), document.getElementById('someTagInTheDynamicHtml'));
};

afterRenderはここでは呼び出されません (テンプレート バインディングでのみ動作しますか?)。カスタム バインディングも役に立ちません。これは、" update" イベントが DOM の更新後に呼び出されることが保証されていないためです。

4

1 に答える 1

12

はい、バインディングのみでafterRender動作します。template

htmlただし、バインディングの変更を追跡し、値が更新されたときにコールバックを起動するカスタム バインディング ハンドラを作成できます。私の例：

ko.bindingHandlers.afterHtmlRender = {
    update: function(el, va, ab){
        ab().html && va()(ab().html);
    }
}

短縮されたパラメーター名: va - valueAccessor、 ab - allBindings。

また、マークアップは次のようになります (バインディング名が変更されています)。

<div data-bind="html: dynamicHtml, afterHtmlRender: customCode"></div>

http://jsfiddle.net/dDDjf/

アップデート

説明付きの簡略化されたバインディング コード:

ko.bindingHandlers.afterHtmlRender = {
    update: function(element, valueAccessor, allBindings){
        // check if element has 'html' binding
        if (!allBindings().html) return;
        // get bound callback (don't care about context, it's ready-to-use ref to function)
        var callback = valueAccessor();
        // fire callback with new value of an observable bound via 'html' binding
        callback(allBindings().html);
    }
}
于 2013-04-27T11:50:35.397 に答える