2011-09-15 15 views
1

私はknockoutjsでネストされたクエリエディタを構築していて、foreachモードのテンプレートでbeforeRemoveとafterAddオプションを使ってアニメーションを追加しました。これは、ネストの最初のレベルでうまく動作しますが、子フィルタグループ内のフィルタを操作するときは機能しません。KnockoutJSがbeforeRemoveとafterAddをネストされたテンプレートに追加

私は何か間違っているのですか、これはKnockoutJSのバグですか? afterAddとbeforeRemoveはネストされたテンプレートでサポートされていませんか?もしそうなら、回避策はありますか?

ここにはmy jsfiddle of the problemです。

また、追加/削除されているものに基づいてアニメーションの動作を変更する方法はありますか?フィルタグループを追加/削除してフィルタを追加/削除するためのアニメーションが必要です。

答えて

2

このpostに記載されている問題が発生しています。基本的には、内部テンプレートは$ data.filtersに依存し、項目が追加されるたびにテンプレート全体を再描画します。したがって、リスト全体が毎回ゼロから再レンダリングされるため、アニメーションは発生しません。ここで

テンプレートにロジックが結合する「場合は」プッシュするためのテンプレートで再ファクタリング少量のサンプルです:、http://jsfiddle.net/rniemeyer/UkGTF/

をもあなたは、ネイティブテンプレートと1.3betaを使用して起動するならば、あなたがすることができますこれをさらに単純化するために、if,with、およびforeachの制御フローバインディングを使用してください。

+0

であり、それは完璧な理にかなっています。 – daedalus28

+0

これはうまくいきましたので、私は別のコンポーネントのアニメーションを別々に見直してもらうように促しました。しかし、それは[正常]です(http://jsfiddle.net/daedalus28/vpjhZ/)。 – daedalus28

3

質問の第2部分を自分で考え出しました。

私はafterAdd関数とbeforeRemove関数を明示的に宣言して(そしてマークアップから外した)、jQueryを使ってelem要素のチェックをいくつか行いましたそれがフィルタかフィルタグループかにかかわらず、異なるアニメーションを適切に適用します。ここで

は美しく働いfinal fiddle

関連する問題