ナビゲーションタブを作成しようとしています( 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/ に静的navbarおよびルーター/アウトレット機能の素晴らしい例がありますが、動的navbar/menu/tabビューを作成する方法を理解できません。
私の知る限り、各メニュー項目でクラスバインディングを使用することは可能です。
classNameBindings: ['isActive:active']
しかし、isActive属性を切り替える適切な場所はどこですか?
Ember> = 1.11を使用している場合、 https://stackoverflow.com/a/14501021/65542 以下が正しい答えです。
NavigationView
を作成します。 http://jsfiddle.net/pangratz666/z8ssG/ を参照してください。
ハンドルバー:
_<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 リポジトリもご覧ください。このリポジトリは、この機能とBootstrap Ember.js内のその他の機能をラップします
Ember 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}}
上記の提案のいくつかは、Twitter bootstrapの場合にも有効です。このようなものを試すこともできます
{{#link-to 'dashboard' tagName='li'}}
{{#link-to 'dashboard'}}Link Title{{/link-to}}
{{/link-to}}
link-to
with li
tagNameは、アクティブなクラスをliに適用しますlink-to
はanchor
要素になり、Open in New Tab
右クリック時の機能最近、これを行うために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>
これは古い投稿であることは知っていますが、ここではEmber 2.4.0の更新があります
あなたが書くことができるリンクを作成するために
{{#link-to 'photoGallery'}}
Great Hamster Photos
{{/link-to}}
または
{{link-to 'Great Hamster Photos' 'photoGallery'}}
Emberは、現在のルートがリンクのルート(この例ではphotoGallery
)と一致すると、クラスを自動的にアクティブに設定します。
他のルートの「アクティブ」クラスも制御したい場合は、current-when
属性。
{{#link-to 'photoGallery' current-when='photoGallery photoPreview'}}
Great Hamster Photos
{{/link-to}}
このリンクには、active
ルートとphotoGallery
ルートの両方にphotoPreview
クラスがあります。
ハンドルバー
<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を使用してテストされています
この質問はかなり古いものですが、Ember.jsをRC3にアップグレードした場合、次のようなtagName
プロパティを使用できます。
{{#link-to messages tagName="li"}}Messages{{/link-to}}
ここにAPIがあります- http://emberjs.com/api/classes/Ember.LinkView.html
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"),
V0.8.0以降 ember-bootstrap は、アクティブ状態を正しく処理するなど、navをサポートします。そして、link-to/tagNameのようなハッキングのないもの:
{{#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 を参照してください
ここで提案されているソリューションの多くは、最近のEmberバージョン(たとえば、廃止予定のビュー)では機能しません。さらに、単にlink-to
ヘルパーはこの問題を解決しません。bootstrap=はactive
クラスが<li>
ではなく<a>
!
だから、私は今のところ実際に機能するソリューションを要約しようとします:
アドオンは、この特別なユースケースのコンポーネントを提供します。
<ul class="nav nav-tabs">
{{#active-link}}
{{#link-to "foo"}}Foo{{/link-to}}
{{/active-link}}
{{#active-link}}
{{#link-to "bar"}}Bar{{/link-to}}
{{/active-link}}
</ul>
https://stackoverflow.com/a/29939821/5556104 から取得
ember-bootstrap は、bootstrap=機能をemberアプリ、中でもnavコンポーネントに統合する多くのコンポーネントを提供します。
{{#bs-nav type="tabs"}}
{{#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}}
https://stackoverflow.com/a/38279975/5556104 から取得
ややハッキングですが、追加のアドオンなしで動作するはずです:
<ul class="nav nav-tabs">
{{#link-to "foo" tagName="li"}}
{{#link-to "foo"}}Foo{{/link-to}}
{{/link-to}}
{{#link-to "bar" tagName="li"}}
{{#link-to "bar"}}Bar{{/link-to}}
{{/link-to}}
</ul>
それが非常に動的であるかどうかはわかりませんが、 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のソリューションはきれいに見える
完全なソリューションを次に示します。
見る:
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>
他の人が言ったように、{{#link-to}}
既存のroute
にリンクします。そのルートが現在のURLである場合、{{#link-to}}
は、CSSクラスにactive
を自動的に追加します。
Ember issue 4387 を参照してください
上記のbaijumの答えはほとんど正しいですが、Emberの最新バージョンでは "bind-attr"は非推奨です。これを記述する新しい方法は次のとおりです。
{{#link-to "dashboard" tagName="li"}}
<a href="{{view.href}}">Dashboard</a>
{{/link-to}}
ご覧のように、それはさらに簡単で、魔法のような作品です。
遅かれ早かれ、状態の命名法やコードとビューを通過する必要のあるものを変更したいと考えています。また、すべてのルートに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ブートストラップスタイルの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'
)
]
)