ember.js - 将“活动”类分配给 EmberJS 中的选定列表项

Question

我有一个列表，我想自动将一项设置为 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你可以创建一个自定义视图和帮助器，扩展Ember.LinkView和使用一个li但不断变化的 css 会容易得多。

- - 更新 - -

由于我们都喜欢 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 linkTo helper with bootstrap pills的工作示例：http: //jsbin.com/ekobod/5/edit（需要ember-1.0.0-pre.4）

score 5 · Accepted Answer

活动路线的路径在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>

score 5 · Accepted Answer

我制作了一个 ember-cli 插件来处理这个问题：

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

score 3 · Accepted Answer

编辑：最后，我发现使用链接的 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 将在相关时自动添加类。

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>

适用于 Bootstrap v3.1.1 和 Ember v1.7.0

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

只需将 {{link-to}} 与外部的 tagName 嵌套。我在 EmberJS 2.0 上这样做。

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

score 1 · Accepted Answer

如果你想在 Ember 中使用 Bootstrap 导航，那么你可以使用 Bootstrap for Ember，它具有开箱即用的支持：

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 和 Ember 2.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