我可以在{{link-to}}助手上强制使用“活动”课程吗？ [英] Can I force 'active' class on a {{link-to}} helper?

问题描述

这里可能是恩伯如何在辅助程序链接上添加活动类的一个极端例子。

Here is possibly an edge case for how ember adds the 'active' class on a link to helper.

我目前的路由器设置如下：

I have my current router set up like so:

import Ember from 'ember';
var Router = Ember.Router.extend({
  location: PortalDevENV.locationType
});

Router.map(function() {
    this.resource('portal', function() {
        this.route('admin');
        this.resource('placements', function() {
            this.route('import-debtors');
            this.resource('add-debtor', function() {
                this.route('debtor-form');
            });
            this.route('view-debtors');
        });
        this.resource('debtor', {path: 'placements/view-debtors/debtor/:debtor_id'}, function() {
            this.route('agent-notes');
            this.route('transactions');
        });
    });
});

export default Router;

请注意我如何将一个名为 debtor的资源-当它正在渲染到门户网站模板中时-我仍然需要它出现（就URL而言），使其成为查看债务人路线的子级...实际上，它更深地嵌套在一组单独的模板中。

notice how I have a resource called "debtor" that- while it is being rendering into the portal template- i still need it to appear (in terms of the URL) to be a child of the "view-debtors" route... which, in reality, is nested deeper within a separate set of templates.

此结构似乎运行良好，但它破坏了我的面包屑式导航。

This structure seems to be working fine, but it is breaking my breadcrumb-style navigation.

何时进入债务人页面。.我仍然希望视图债务人 {{link-to}} 助手从烬中获取活动类...以及导致的 {{link-to}} 。

When moving into the "debtor" page.. i still want "view-debtors" {{link-to}} helper to get the 'active' class from ember... along with the {{link-to}}'s that lead up to the "view-debtors".

是否可以通过在我的路线中调用某些函数来实现……或其他方式？

Is this possible to do by calling some functions in my routes... or some other way?

这似乎不是通用的余烬约定...但是话又说回来，也许Ember确实以这种方式工作，而我做了其他破坏它的事情？看看我的设置是否正确。

It doesn't seem to be a common ember convention... but then again perhaps Ember actually does work in this way and I did something else that broke it? Take a look and see if my set up is correct.

推荐答案

您应该能够将活动类绑定到计算属性。假设您所指的 {{link-to}} 在 application.hbs 模板中，则可以像这样的东西：

You should be able to bind the active class to a computed property. Assuming the {{link-to}} you are referring to is in your application.hbs template, you could do something like this:

// templates/applictaion.hbs
{{#link-to "view-debtors" class="isDebtorsRoute:active"}}View Debtors{{/link-to}}


// controllers/application.js
export default Ember.Controller.extend({
  isDebtorsRoute: function() {
    // use this.get('currentRouteName') or this.get('currentPath')
  }.property('currentPath')
})

编辑：这是一个jsbin示例 http://emberjs.jsbin.com/wuhor/1/edit?html,css,js,output

Here is a jsbin example http://emberjs.jsbin.com/wuhor/1/edit?html,css,js,output

这篇关于我可以在{{link-to}}助手上强制使用“活动”课程吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！