ember.js - EmberJSで選択したリストアイテムに「アクティブ」クラスを割り当てる

Question

リストがあり、1つのアイテムをclass="active"として自動的に設定したいと思います。次のブートストラップコードがあるとします。

<ul class="nav">
<li {{bindAttr class="atIndex:active"}}>{{#linkTo "index"}}Index{{/linkTo}}</li>
<li {{bindAttr class="atAbout:active"}}>{{#linkTo "about"}}About{{/linkTo}}</li>
<li {{bindAttr class="atLogin:active"}}>{{#linkTo "login"}}Login{{/linkTo}}</li>
</ul>

atIndex、atAbout、およびatLoginは私のApplicationControllerにあります。

次のようにレンダリングするには：

<ul class="nav">
<li class="active"><a...>Index{{/linkTo}}</li>
<li><a...>About<a></li>
<li><a...>Login<a></li>
</ul>

Ember 1.0 pre4でこれを行うための最良の方法は何ですか？すべてのビューまたはコントローラーに特別なコードを追加したくありません。

PS-atIndex: true動作しますが、atIndex: function() {return true; }.property().volatile()動作しません。それは私が何か間違ったことをしていると私に思わせます。

ありがとうございました！

score 75 · Accepted Answer

{{#link-to "dashboard" tagName="li" href=false}}
  <a {{bind-attr href="view.href"}}>
    Dashboard
  </a>
{{/link-to}}

score 14 · Accepted Answer

これを解決する最もクリーンな方法は、linkToリンクをレンダリングするときにアクティブクラスを設定するためのヘルパーの組み込みサポートを利用することです。AFAIKこれは、ソースコード以外ではまだ文書化されていません。

実装：https ：//github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib/helpers/link_to.js#L46

例：https ：//github.com/emberjs/ember.js/blob/master/packages/ember/tests/helpers/link_to_test.js#L120

この機能を利用するには、li要素ではなくリンク上にアクティブなクラスがあることに基づいて、cssをスタイルに調整するだけです。本当にスタイルを設定する必要がある場合は、拡張して使用するliカスタムビューとヘルパーを作成できますが、cssの変更ははるかに簡単です。Ember.LinkViewli

- - アップデート - -

私たちは皆Twitterのブートストラップが大好きなので、CSSを変更するだけではおそらくそれほど素晴らしい選択肢ではありません。その場合、次の方法でうまくいきます。

App.ApplicationView = Ember.View.extend({
  currentPathDidChange: function() {
    Ember.run.next( this, function() {
      this.$("ul.nav li:has(>a.active)").addClass('active');
      this.$("ul.nav li:not(:has(>a.active))").removeClass('active');
    });
  }.observes('controller.currentPath')
});

ember linkを使用した実例ブートストラップピルを使用したヘルパー：http：//jsbin.com/ekobod/5/edit （ ember-1.0.0-pre.4が必要）

score 5 · Accepted Answer

アクティブなルートのパスはApplicationControllerviaで自動的に更新されるcurrentPathので、アプリでそのようなことをしました...次のApplicationControllerような追加のプロパティで：

isProductsActive: function(){
  if ( this.get('currentPath') === 'products' ) return 'active';
  else return '';
}.property('currentPath')

そして私のApplicationViewテンプレートでは：

<li {{bindAttr class="isProductsActive"}}>
  {{#linkTo "products"}}Products{{/linkTo}}
</li>

score 5 · Accepted Answer

これを処理するember-cliアドオンを作成しました。

https://github.com/alexspeller/ember-cli-active-link-wrapper

score 3 · Accepted Answer

編集：最後に、リンクのember.jsを使用してブートストラップli要素のactivateクラスを使用するために私が見つけた最良の方法。

{{#linkTo "dives" tagName="li"}}
   <a {{bindAttr href="view.href"}}>Dives</a>
{{/linkTo}}

--------------8 <--------------

非推奨：

Ember.jsがlinkToヘルパーのactiveClass属性を導入する前は、以前の回答が適切だったと思います。今、私はこのような問題を解決します：

<ul class="nav">
<li >{{#linkTo "index" activeClass="active"}}Index{{/linkTo}}</li>
<li >{{#linkTo "about" activeClass="active}}About{{/linkTo}}</li>
<li >{{#linkTo "login" activeClass="active}}Login{{/linkTo}}</li>
</ul>

Enberは、必要に応じてクラスを自動的に追加します。

score 2 · Accepted Answer

ハンドルバーだけを必要とする別の解決策を提案する場合：

<li {{bind-attr class="view.innerLink.active:active"}}>
    {{#link-to "path" viewName="innerLink"}}Click{{/link-to}}
</li>

これにより、LinkViewオブジェクトが親ビューのメンバーとして設定されます。親ビューは、参照できるアクティブな属性です。

score 2 · Accepted Answer

リストグループ（ http://getbootstrap.com/components/#list-group-linked ）でリンクされたアイテムを使用する非常に単純なソリューションを見つけました。

<div class="list-group">
{{#each thing in list}}
    {{#link-to "details" thing.id tagName="a" href="view.href" class="list-group-item" {{thing.name}} {{/link-to}}
{{/each}}
</div>

Bootstrapv3.1.1およびEmberv1.7.0で動作します

score 2 · Accepted Answer

{{link-to}}を外側のtagNameにネストするだけです。私はEmberJS2.0でこれを行っています。

{{#link-to "admin.websocket" tagName="li"}}
    {{#link-to "admin.websocket"}}WebSocket{{/link-to}}
{{/link-to}}

score 1 · Accepted Answer

EmberでBootstrapナビゲーションを使用する場合は、次の機能をすぐにサポートするBootstrapforEmberを使用できます。

Github：https ://github.com/ember-addons/bootstrap-for-ember デモ：http ：//ember-addons.github.io/bootstrap-for-ember/dist/#/show_components/tabs

score 1 · Accepted Answer

これらの答えの多くは時代遅れです。BootstrapとEmber2.xのよりクリーンな（そしてDRY）バージョンは次のとおりです。

{{#link-to "index" tagName="li" as |link|}}
  <a href="#" class="{{if link.active 'active'}}">Index Page</a>
{{/link-to}}

score 0 · Accepted Answer

アイテムごとにビューを作成して使用することで、同様の問題を解決しましたclassNameBindings（HTMLリストはありません。つまり<a>...</a>、アプリにはリストだけがあります<div>）。

これが私のために働く方法です：

tasklist.handlebarsで、カスタムビューを繰り返し処理します

  {{#each tasks}}
    {{view App.TaskListItemView contentBinding="this"....}}
  {{/each}}

Emberは<div>、各アイテムのビュー（つまり）を挿入します。

各アイテムのビュークラスは、task_list_item_view.jsで次のように定義されています。

App.TaskListItemView = Ember.View.extend({

  controller: null,
  classNameBindings: ['isSelected', 'isClosed'],

  isClosed: function() {
      var content = this.get('content');
      return content && !content.isOpen(new Date);
  }.property('controller.content.@each'),

  isSelected: function() {
      return (this.get('controller').isSelectedTask(this.get('content')));
  }.property('controller.taskSelection.@each'),

  ....
});

最後に、ビューのテンプレートは、tasklistitem.handlebarsにリンクをレンダリングするだけです。

<a {{action "selectTask" view.content target="view"}} rel="tooltip"
         {{bindAttr title="view.content.comment"}} class="taskListLink">
  ....
</a>

AFAIKでは、property()呼び出しでソースデータを指定して、プロパティを（再）評価するタイミングをemberに通知する必要があります。

お役に立てば幸い

score -1 · Accepted Answer

私は一緒に行きました：

 Ember.LinkView.reopen({
didInsertElement:function(){

    if(this.$().hasClass('active')){

        this.$().parent().addClass('active');

    }
}

}）;

li要素を単純な古いhtmlのままにしておきたかったので、受け入れられた回答を使用したくありませんでした。アクティブな状態を確認するためのより良い方法があるかもしれませんが、適切なプロパティにアクセスできませんでした。

ember.js - EmberJSで選択したリストアイテムに「アクティブ」クラスを割り当てる

12 に答える 12

Related

Reference