3

ハンドルバー付きのEmber.jsを使用していますが、クリックするとページ内のdivを折りたたみ/展開する必要があります。jQueryでこれを行う方法は知っていますが、jQueryを使用できません。誰かがこれを達成する方法を知っていますか？また、非表示属性を切り替えるだけではなく、折りたたむために完全な上下スライド機能が必要です。誰かアイデアがあれば、本当にありがたいです。

ありがとう

4

3 に答える 3

2

ビューをクリックすると、クリックイベントがトリガーされます。ビューのクリックイベントハンドラー内で、任意の方法でアニメーションをコーディングできます。

CollapsableView = Ember.View.extend({
   click : function(event) {
      this.$().toggle('fast');
   }
})
于 2012-09-04T14:44:35.063 に答える
1

Emberでこれを行う適切な方法は、すばらしいLiquidFireアドオンを使用することです。

アウトライン：

  1. プロジェクトにLiquidFireをインストールします。

  2. 次のような遷移を定義します。

    this.transition(
  this.hasClass('transition-spoiler'),
  this.toValue(true),
  this.use('toDown'),
  this.reverse('toUp')
);

  3. コントローラ/コンポーネントで、プロパティspoilerIsVisibleとプロパティを作成しtoggleSpoilerます。

    spoilerIsVisible: false,

actions: {
  toggleSpoiler: function() {
    this.toggleProperty('spoilerIsVisible');
  }
}

  4. ページ/コンポーネントテンプレートで、次のようなボタンとスポイラーラッパーを作成します。

    <button {{action 'toggleSpoiler'}}>
  {{if spoilerIsVisible 'Show spoiler' 'Hide spoiler'}}
</button>

{{#liquid-if spoilerIsVisible class="transition-spoiler"}}
  <p>Dumbledore dies</p>
{{/liquid-if}}

x-spoiler手順3〜4をコンポーネントなどにラップできることに注意してください。

于 2015-05-14T14:00:34.660 に答える
0

私は似たようなことをしますが、ツリー構造を使用します。私はこれについて以前にここにブログ投稿を書きました：http：//haagen-software.no/blog/post/2012-05-05-Ember_tree

ノードがクリックされたときにDOMに要素を追加したり、DOMから要素を削除したりするという点で、必要な機能を備えています。

実用的な例は、私が現在ここで構築しているアプリで見ることができます：https ://github.com/joachimhs/EurekaJ/tree/netty-ember/EurekaJ.View/src/main/webapp

于 2012-09-04T15:25:19.990 に答える