web-dev-qa-db-ja.com

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

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

_<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()は機能しません。それは私が何か間違ったことをしていると思うようにします。

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

ember.js
40
shs
{{#link-to "dashboard" tagName="li" href=false}}
  <a {{bind-attr href="view.href"}}>
    Dashboard
  </a>
{{/link-to}}
75
lesyk

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

実装： 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#L12

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

---更新----

私たちはみんなTwitterが大好きなので、bootstrap）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 linkToヘルパーとbootstrap= pills： http://jsbin.com/ekobod/5/edit （requires ember-1.0.0-pre.4）

14
Mike Grassotti

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

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

5
alexspeller

アクティブなルートのパスはApplicationControllerで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>
5
colymba

[〜＃〜] edit [〜＃〜]：最後に、ember.jsを使用してbootstrap li要素のアクティベートクラスを使用するのに最適な方法です。リンクの。

{{#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は、必要に応じてクラスを自動的に追加します。

3
Cyril

リストグループ内のリンクされたアイテムを使用した非常にシンプルなソリューションを見つけました（ 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>

Bootstrap v3.1.1およびEmber v1.7.0

2
Karda

{{link-to}}を外側のtagNameでネストするだけです。 EmberJS 2.0でこれを行っています。

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

Handlebarsのみを必要とする別のソリューションを提案する場合：

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

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

2
Elte Hupkes

これらの答えの多くは時代遅れです。 BootstrapおよびEmber 2.x：

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

BootstrapでEmberナビゲーションを使用する場合、BootstrapにEmberを使用できます。

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

1
asaf000

各アイテムのビューを作成し、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>
_

property()呼び出しでソースデータを指定して、emberプロパティをいつ（再）評価するかを知る必要があります）。

役立つことを願っています

0
Thomas Herrmann