Question

我有两条嵌套在同一资源下的路由，如下所示：

Router.map(function() {
  this.resource('dashboard', function() {
    this.route('foo');
    this.route('bar');
  });
});

目前，在我的app/templates/application.hbs中，我的导航设置如下：

<ul class="nav navbar-nav">
  {{#link-to "dashboard.foo" tagName="li"}}
    <a {{bind-attr href="view.href"}}>Dashboard</a>
  {{/link-to}}
</ul>

显然，这是指向dashboard.foo的链接。但是，该链接也需要在dashboard.bar上有效。它必须指向dashboard.foo而不是dashboard。

我尝试在应用程序控制器中创建一个计算属性，就像this问题的答案一样，但currentPath从未显示它在仪表板上。这是我的尝试：

export default Ember.Controller.extend({
  isDashboardRoute: function() {
    var routeName = this.get('currentRouteName');
    var currentPath = this.get('currentPath');
    console.log(routeName); // "loading"
    console.log(currentPath); // "loading"
  }.property('currentPath')
});

然后我尝试添加一个虚拟链接，将其显示为活动状态（如this Stack Overflow question所述），但似乎它会立即触发两个事件。这是尝试：

// application.hbs
{{#link-to "dashboard" tagName="li" href=false eventName="dummy"}}
  {{#link-to "dashboard.foo"}}Dashboard{{/link-to}}
{{/link-to}}

有什么想法吗？

修改

将以下答案插入我的代码后，这就是我现在拥有的内容：

{{#link-to "dashboard.foo" tagName="li" current-when="dashboard"}}
  <a {{bind-attr href="view.href"}}>Dashboard</a>
{{/link-to}}

我无法使用嵌套link-to，因为它只会将li和a都标记为活动状态，而我只需要前者处于活动状态。

Answer 1

您可以使用current-when属性。

{{#link-to "dashboard" tagName="li" href=false eventName="dummy" current-when="dashboard"}}
  {{#link-to "dashboard.foo"}}Dashboard{{/link-to}}
{{/link-to}}

还有ember-routing-multi-current-when

的功能标记

在特定页面上添加要链接的类

1 个答案: