51

ナビゲーション タブを作成しようとしています ( Twitter Bootstrapから取得):

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Messages</a></li>
</ul>

アクティブなタブには が付いていclass="active"ます。

http://jsfiddle.net/schawaska/pfbva/に静的ナビゲーション バーとルーター/アウトレット機能の優れた例がありますが、動的ナビゲーション バー/メニュー/タブ ビューを作成する方法がわかりません。

私が理解している限り、各メニュー項目でクラスバインディングを使用することが可能です:

 classNameBindings: ['isActive:active']

しかし、 isActive 属性を切り替える適切な場所はどこでしょうか?

4

15 に答える 15

154

残り火1.11+:

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

残り火<1.11(bind-attr必須):

{{#link-to "dashboard" tagName="li"}}
  <a {{bind-attr href="view.href"}}>Dashboard</a>
{{/link-to}}
于 2013-01-24T12:08:23.630 に答える
26

Ember >= 1.11 を使用している場合、以下のhttps://stackoverflow.com/a/14501021/65542が正解です。


http://jsfiddle.net/pangratz666/z8ssG/NavigationViewを参照してください。

ハンドルバー:

<script type="text/x-handlebars" data-template-name="navigation">
    <ul class="nav nav-tabs">
        {{#view view.NavItemView item="home" }}
            <a {{action gotoHome}} >Home</a>
        {{/view}}
        {{#view view.NavItemView item="profiles" }}
            <a {{action gotoProfiles}} >Profiles</a>
        {{/view}}
        {{#view view.NavItemView item="messages" }}
            <a {{action gotoMessages}} >Messages</a>
        {{/view}}        
    </ul>
</script>

JavaScript :

App.NavigationView = Em.View.extend({
    templateName: 'navigation',
    selectedBinding: 'controller.selected',
    NavItemView: Ember.View.extend({
        tagName: 'li',
        classNameBindings: 'isActive:active'.w(),
        isActive: function() {
            return this.get('item') === this.get('parentView.selected');
        }.property('item', 'parentView.selected').cacheable()
    })
});

そして、ルート内でconnectOutlets、現在のナビゲーション項目を設定する必要がありますrouter.set('navigationController.selected', 'home');...


また、ember-bootstrapリポジトリも見てください。このリポジトリには、Ember.js 内の Bootstrap のこの機能とその他の機能がラップされています。

于 2012-07-24T11:34:07.610 に答える
10

最近、これを行うための Ember-cli アドオンが利用可能になりました。これはember-cli-active-link-wrapperと呼ばれます。

インストール:ember install ember-cli-active-link-wrapper

次のように使用できます。

{{#active-link}}
  {{link-to "Index" "index"}}
{{/active-link}}

その結果:

<li class='active'>
    <a href="/" class='active'>Index</a>
</li>
于 2015-04-29T09:38:19.293 に答える
4

ハンドルバー

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

Javascript

App.Router.map(function() {
    this.route("about");
});

ルートに基づいてアクティブなクラスを自動的に追加します。注: ember-1.0.0-pre.4.js を使用してテストされています

于 2013-02-16T12:51:09.023 に答える
3

isActiveメソッドを次のように変更することもできます。

isActive: function() {
    return App.getPath('router.currentState.path') === "root.firms";
}.property("App.router.currentState"),

また

isActive: function() {
    return this.get('controller.target.currentState.path') === "root.firms";
}.property("controller.target.currentState"),
于 2012-08-02T07:08:15.587 に答える
3

この質問はかなり古いと思いますが、Ember.js を RC3 にアップグレードした場合はtagName、次のようなプロパティを使用できます。

{{#link-to messages tagName="li"}}Messages{{/link-to}}

これがAPIです - http://emberjs.com/api/classes/Ember.LinkView.html

于 2013-04-26T23:38:36.273 に答える
1

非常に動的かどうかはわかりませんが、http://codebrief.com/2012/07/anatomy-of-an-ember-dot-js-app-part-i-redux-routing-and-outlets/で解決策を確認してください。 主なアイデアは、アプリの状態を確認することです

JavaScript:

function stateFlag(name) {
  return Ember.computed(function() {
    var state = App.router.currentState;
    while(state) {
      if(state.name === name) return true;
      state = state.get('parentState');
    }
    return false;
  }).property('App.router.currentState');
}

ApplicationController: Ember.Controller.extend({
    isHome: stateFlag('home'),
    isSections: stateFlag('sections'),
    isItems: stateFlag('items')
  })

ハンドルバー:

<li class="home" {{bindAttr class="isHome:active"}}>
</li>
<li class="sections" {{bindAttr class="isSections:active"}}>
</li>
<li class="items" {{bindAttr class="isItems:active"}}>
</li>

更新: pangratzのソリューションはよりきれいに見えます

于 2012-07-24T11:14:26.437 に答える
1

v0.8.0 から、ember-bootstrapはナビゲーションをサポートし、アクティブ状態を正しく処理します。そして、リンク先/タグ名の種類のハックなしで:

{{#bs-nav type="pills"}}
   {{#bs-nav-item}}
      {{#link-to "foo"}}Foo{{/link-to}}
   {{/bs-nav-item}}
   {{#bs-nav-item}}
     {{#link-to "bar"}}Bar{{/link-to}}
   {{/bs-nav-item}}
 {{/bs-nav}}

http://kaliber5.github.io/ember-bootstrap/api/classes/Components.Nav.htmlを参照してください。

于 2016-07-09T08:37:32.880 に答える
1

完全に機能するソリューションは次のとおりです。

意見:

App.NavView = Ember.View.extend({
  tagName: 'li',
  classNameBindings: ['active'],

  active: function() {
    return this.get('childViews.firstObject.active');
  }.property()
});

テンプレート:

<ul>
  {{#each item in controller}}
  {{#view App.NavView}}
  {{#linkTo "item" item tagName="li"}}
      <a {{bindAttr href="view.href"}}>
        {{ item.name }}
      </a>
  {{/linkTo}}
  {{/view}}
  {{/each}}
</ul>
于 2013-02-14T21:20:04.083 に答える
0

遅かれ早かれ、状態の名前付けや、コードとビューを通過する必要があるものを変更したい場合、すべてのルートに transitionTo 関数を追加することも望ましくないようです。私のアプローチは、もう少しプログラム的でモジュール化されています。

# Parent View-Tamplate, holding the navbar DOM elements
App.NavView = Ember.View.extend( 
  controller: App.NavArrayController
  templateName: "ember-nav"
)
# We push NavItems into this array
App.NavArrayController = Ember.ArrayController.create(
  content: Ember.A([])
)
# NavItem has two settable properties and 
# an programmatic active state depending on the router
App.NavItem = Ember.Object.extend(
  title: ''
  goto: null    # <=this is the name of the state we want to go to!
  active: (->
    if App.router.currentState.name == @.get "goto"
      true
    else
      false
  ).property('App.router.currentState.name').cacheable()
)
# the actual NavElement which gets the class="active" if the 
# property "active" is true, plus a on-click binding to
# make the Router transition to this state
App.NavItemView = Ember.View.extend(
 tagName: "li"
  classNameBindings: ["active"]
  click: ->
    App.router.transitionTo(@get('goto'))
    false
)

nav-view.hbs (twitter-bootstrap-style nav 用)

<div class="nav-collapse collapse">
  <ul class="nav">
    {{#each App.NavArrayController}}
      {{#view App.NavItemView classBinding="active" gotoBinding="goto"}}
        <a href="#" {{bindAttr data-goto="goto"}}> {{title}}</a>
      {{/view}}
    {{/each}}
  </ul>
</div>

このようにして、ルーターでルートを作成していじり、Nav-Definitions を並べて保持することができます。

# put this somewhere close to the Router 
App.NavArrayController.pushObjects(
  [
    App.NavItem.create(
      title: 'Home'
      goto: 'home'
    ),
    App.NavItem.create(
      title: 'Chat'
      goto: 'chat'
    ),
    App.NavItem.create(
      title: 'Test'
      goto: 'test'
    )
  ]
)
于 2012-12-27T19:18:04.320 に答える
0

上記のbaijumの答えはほとんど正しいですが、Emberの最新バージョンでは「bind-attr」は非推奨です。新しい書き方は次のとおりです。

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

ご覧のとおり、それはさらに簡単で、魔法のように機能します..

于 2015-07-21T16:35:03.780 に答える