10

ノックアウトjsのforeachバインディングを使用して、挿入される要素に入口効果を指定しようとしています。非常に簡単なセットアップ:

myViewModel.myObservableArray.push({enter:function() { ... });

そしてマークアップで：

foreach:{data:myObservableArray, afterRender:enter}

それはうまくいくはずです...そうですか？しかし、アイテムの入力機能が見つかりません。私が見つけたのは機能します：

myViewModel.enter = function(something, item) { item.enter(); };

foreach:{data:myObservableArray, afterRender:$root.enter}

Enter 関数をルート ビュー モデルに追加し、afterRender$root.enter にバインドします。次に、Enter にアイテムが 2 番目のパラメーターとして渡されるため、アイテムの enter 関数を呼び出すことができますが、ハックのように感じます。

ここで何が起こっているのか誰か説明できますか?

ありがとう。

編集：

明確にするために、フィドルを作成しました。

これが行うことは非常に単純で、アニメーション化されたトランジションの例で詳しく説明されています。foreach バインディングを使用して挿入された各 dom 要素に対して、ルート ビュー モデルで関数を実行しています。

問題は、アイテム固有の afterRender、afterAdd、または beforeRemove 関数が必要な場合はどうすればよいかということです。これは有用であることがわかりました。特に、テンプレート バインディングを使用してテンプレートを動的に選択する場合 (注 4 )。これを行うクリーンな方法はありますか？現在enter、ビューモデルのルートenterに、アイテムの関数を呼び出すだけの関数がありますが、上で述べたように、これはハックのように感じます。

4

3 に答える 3

5

アンダースコア デバウンス (_.debounce) は、このような場合に最適なソリューションです。

テンプレート

data-bind=" template: {foreach:myObservableArray, afterRender: runWhenAllRenderDone }

afterRender が最後の 100 ミリ秒以内に起動されない場合、debounce 関数が実行されます。

var runWhenAllRenderDone = _.debounce(myFunction, 100);

function myFunction(){
    //do some task but do it for once only
}

それは素晴らしいことではありませんか？

于 2013-01-17T21:56:22.780 に答える
5

いいえ、これは設計された方法です。

ドキュメントから：

注 3: 「afterRender」、「afterAdd」、および「beforeRemove」の使用</p>

テンプレートによって生成された DOM 要素に対してカスタムの後処理ロジックを実行したい場合があります。たとえば、jQuery UI などの JavaScript ウィジェット ライブラリを使用している場合、テンプレートの出力をインターセプトして、jQuery UI コマンドを実行し、レンダリングされた要素の一部を日付ピッカー、スライダー、または他に何か。

一般に、DOM 要素に対してこのような後処理を実行する最善の方法は、カスタム バインディングを記述することですが、テンプレートによって生成された未加工の DOM 要素に本当にアクセスしたい場合は、afterRender を使用できます。

関数参照 (関数リテラル、またはビュー モデルの関数名のいずれか) を渡すと、Knockout はテンプレートをレンダリングまたは再レンダリングした直後にそれを呼び出します。

(私のものを強調)

enter()それが言うように、カスタムバインディングはそれを行う別の方法であり、その関数が何をするかによってはより良いかもしれません.

于 2012-07-31T21:41:40.473 に答える