4

Ember のガイドのコンポーネント セクションには、 Post Summary Componentのデモがあり、1 つの Post Summery タイトルをクリックすると、その下のコンテンツが開きます。

開いている他の投稿サマリーを同時に閉じる機能を追加したいと思います。

私の質問の目的は、ember が分離を犠牲にすることなくコンポーネント間でどのように話すかを理解することです。

私が考えた解決策は次のとおりです。

  1. 何らかの方法でそれを処理するラッパー コンポーネントがある

  2. 'post-summery:open' のようなイベントを発生させ、他のコンポーネントをその上で閉じます (ただし、同じコンポーネントを異なる用途に使用して、アプリの他の場所と衝突する可能性があります)。

これはドキュメントの元のデモです: http://jsbin.com/uyibis/1/edit

これは、jQuery で動作を実装する方法です: http://jsbin.com/eremon/2/edit

var $contents = $('.content').hide();

$(document).on('click', '.title', function () {

$contents.hide();
$(this).next('.content').show();

});

ここに画像の説明を入力

4

2 に答える 2

2

あなたEmber.ComponentはchildViewsを制御できないので、を使用しEmber.CollectionViewてアイテムを管理しました。App.PostSummaryComponent既に extends があるので、テンプレートで使用してその動作Ember.Componentに委譲します。したがって、私たちは2つの世界の最高のものを持っています.Ember.CollectionViewview containerViewClass

そのプロパティはクラスであるため、ビューが作成されたときにcontainerViewClassそのインスタンスにアクセスする方法、つまりと対話する方法が必要です。childViewsこれを行うviewName='containerView'には、テンプレートで使用する必要があります。containerViewClassこれは、 の新しいインスタンスがというプロパティに設定されること を Ember に伝えますcontainerView。this.get("containerView")で使用できますApp.PostSummaryComponent。

最後の変更は、eachヘルパーをインデックス テンプレートからコンポーネント テンプレートに移動することでした。そのため、コンポーネントへの他の呼び出しはそれを繰り返す必要はありません。

http://jsbin.com/ebayip/2/edit

于 2013-08-03T19:27:03.520 に答える