如果特定路线处于活动状态,我只想在Ember Handlebars中渲染一个块.那么,我如何创建一个'ifRoute'帮助器,具有与'linkTo'帮助器上的'active'类相同的条件?
我想要这个,因为我有两层导航.因此,如果头部导航点处于活动状态,我只想显示子导航.我不想使用'active'类,因为我使用延迟加载,我只想在头部导航点处于活动状态时加载子导航.
所以,我想做的是:
<ul>
{{#each assortmentGroups}}
<li>
{{#linkTo "assortmentGroup" this}} {{description}} {{/linkTo}}
{{#ifRoute "assortmentGroup" this}}
<ul>
{{#each itemCategories}}
<li>{{#linkTo "itemCategory" this}} {{description}} {{/linkTo}}</li>
{{/each}}
</ul>
{{/ifRoute}}
</li>
{{/each}}
<ul>
Run Code Online (Sandbox Code Playgroud)
我该怎么做或有更好的解决方案?
谢谢
小智 8
只需添加到控制器:
needs: ['application'],
isCorrectRouteActive: Ember.computed.equal('controllers.application.currentRouteName', 'correctRoute')
Run Code Online (Sandbox Code Playgroud)
同理:
isCorrectPathActive: Ember.computed.equal('controllers.application.currentPath', 'correct.path')
isCorrectURLActive: Ember.computed.equal('controllers.application.currentURL', 'correctURL')
Run Code Online (Sandbox Code Playgroud)
我很确定最新的Ember会做其余的事情
在研究了 linkTo 和 if 助手的 ember 代码、intuitivepixel 的答案以及关于编写我自己的绑定块助手的博客文章之后,我找到了一个解决方案:
var resolveParams = Ember.Router.resolveParams;
var resolvedPaths = function(options) {
var types = options.options.types.slice(1),
data = options.options.data;
return resolveParams(options.context, options.params, { types: types, data: data });
};
Ember.Handlebars.registerHelper('ifRoute', function(name) {
var options = [].slice.call(arguments, -1)[0];
var params = [].slice.call(arguments, 1, -1);
var theResolvedPaths = resolvedPaths({ context: this, options: options, params: params });
var router = options.data.keywords.controller.container.lookup('router:main');
var self = this;
var evaluateIsCurrentRoute = function() {
self.set('current_route_is_active_bool_for_ifroute', (function() {
return router.isActive.apply(router, [name].concat(theResolvedPaths)) ||
router.isActive.apply(router, [(name + '.index')].concat(theResolvedPaths));
})());
};
evaluateIsCurrentRoute();
router.addObserver('url', evaluateIsCurrentRoute);
options.contexts = null;
return Ember.Handlebars.helpers.boundIf.call(this, 'current_route_is_active_bool_for_ifroute', options);
});
Run Code Online (Sandbox Code Playgroud)