emberjs - 如何使用路由器架构纪念活动菜单项(emberjs - how to mark

我试图创建导航选项卡（摘自Twitter的引导 ）：

<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属性正确的地方？

Answer 1:

如果您使用灰烬> = 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.js更多功能

Answer 2:

男人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}}

Answer 3:

上述的一些建议仍然有效，Twitter的引导情况。 您也可以尝试这样的事情

{{#link-to 'dashboard' tagName='li'}} 
  {{#link-to 'dashboard'}}Link Title{{/link-to}}
{{/link-to}}

1. 该link-to与li标签名申请活动类的李
2. 内部link-to将是一个anchor ，让你元素Open in New Tab功能时，右键点击的

Answer 4:

最近灰烬-CLI插件来提供，只是做到这一点。 这就是所谓的余烬-CLI-主动链接包装 。

安装： 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>

Answer 5:

我知道这是旧的文章，但这里是灰烬2.4.0更新

对于创建链接，你可以写

{{#link-to 'photoGallery'}}
  Great Hamster Photos
{{/link-to}}

要么

{{link-to 'Great Hamster Photos' 'photoGallery'}}

灰烬会自动设置类为主动当电流路径最为匹配链接的路径（在本例photoGallery ）。

如果你想控制的其他路线“活跃”类为好，你可以通过设置做current-when属性。

{{#link-to 'photoGallery' current-when='photoGallery photoPreview'}}
  Great Hamster Photos
{{/link-to}}

此链接将有active两个类photoGallery和photoPreview路线。

https://github.com/emberjs/ember.js/blob/v2.4.0/packages/ember-routing-views/lib/components/link-to.js#L140

Answer 6:

把手

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

使用Javascript

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

它会自动添加基于路线活动类。 注意：使用烬-1.0.0-pre.4.js测试

Answer 7:

您还可以更改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"),

Answer 8:

我看，这个问题很老了，但是如果你升级Ember.js到RC3可以使用tagName属性，如：

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

这里是API - http://emberjs.com/api/classes/Ember.LinkView.html

Answer 9:

不知道这是非常动态的，但尝试看看溶液中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的解决方案看起来更漂亮

Answer 10:

这里是一个完整有效的解决方案：

视图：

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>

Answer 11:

迟早要改变你的国家或任何你必须去通过代码和视图，以及，还加入了功能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的引导式的资产净值）

<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-定义并排侧：

# 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'
    )
  ]
)

Answer 12:

上述baijum的答案是正确的大多不过在“绑定-ATTR”已经过时灰烬的最新版本。 这里是把它写了新的途径：

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

正如你所看到的，那就更简单了，善良的作品像变魔术一样..

Answer 13:

与v0.8.0开始烬，引导支持资产净值，包括正确处理活动状态。 而且，没有任何链接到/标签名种黑客：

{{#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

Answer 14:

很多提出的解决方案在这里没有任何最新版本的灰烬工作（如意见被否决）。 而且只使用link-to帮助不能解决问题，因为自举预计active类存在于<li>不是<a> ！

因此，我将试着总结一下，其实做工作，截至目前的解决方案：

使用烬-CLI-主动链接包装

该插件提供了这种特殊情况下使用的组件：

<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

使用烬自举

烬，引导提供了集成的自举功能集成到应用程序的余烬，在他们之中的导航组件许多组件：

{{#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>

来自https://stackoverflow.com/a/23966652/5556104

Answer 15:

像其他人说，使用{{#link-to}}链接到现有的route ，当这条路线是当前的URL， {{#link-to}}会自动添加active到它的CSS类。

见灰烬问题4387

文章来源: emberjs - how to mark active menu item using router infrastructure