Question

我有一个Ember演示应用程序，如果加载的第一条路线是＆＃39; index＆＃39;，＆＃39; list＆＃39;或者＆＃39; list / index＆＃39;，但如果加载的第一个路线是＆＃39; list / show＆＃39;则不行。代码位于https://github.com/DougReeder/beta-list，演示正在https://ember-demo.surge.sh运行要查看问题，请将窗口设置为小于640px，然后浏览到https://ember-demo.surge.sh/list/5您将看到列表面板，而不是细节小组。

根本问题在于，当路线是＆＃39; list / show＆＃39;时，div与类＆＃39; panelList＆＃39;和＆＃39; panelDetail＆＃39;也应该有正确的等级＆＃39;

我无法在模板中设置此项，因为panelList和panelDetail是由父列表＆＃39;创建的。模板。如果我将panelList和panelDetail移动到子模板＆list; list / index＆＃39;和＆＃39; list / show＆＃39;然后从＆＃39; list / index＆＃39;开始重新呈现列表。列出/显示＆＃39;这将是一场糟糕的表演。

目前，我使用＆＃39; didTransition＆＃39;切换课程的动作“正确”＃39;这被称为然后从＆＃39; list / index＆＃39;到＆＃39;列出/显示＆＃39;，以及何时列出/显示＆＃39;是最初的路线。不幸的是，如果＆＃39; list / show＆＃39;是第一条路线，当'转换'时，没有任何DOM元素存在。被称为。

我可以设想解决方案的两条路线，但不知道如何实施：

切换课程＆＃39;对＆＃39;在DOM元素存在之后发生的某些动作。
在＆＃39;列表中插入条件代码＆＃39;模板，设置课程＆＃39;权利＆＃39; on＆＃39; panelList＆＃39;和＆＃39; panelDetail＆＃39;如果实际路线是＆＃39; list / show＆＃39;。

建议？

Answer 1

回答Ember v2.12.0中的电流

您可以使用link-to helper呈现链接以外的元素，其样式会根据路线而变化。利用activeClass，current-when和tagName属性，您基本上可以根据您所在的路线设置该元素的样式。例如，要渲染panelList div：

{{#link-to tagName='div' classNames='panelList' activeClass='right' current-when='list/show'}}
  More markup
{{/link-to}}

Answer 2

我喜欢空组件的技巧。在init和didInsertElement挂钩中，您可以从父元素或（我更喜欢它）主体添加和删除css类。这是一个代码：

willDestroyElement

我在模板中使用它（在我的示例中它是import Ember from 'ember'; export default Ember.Component.extend({ bodyClass: '', didInsertElement() { const bodyClass = this.get('bodyClass'); if (bodyClass) { Ember.$('body').addClass(bodyClass); } }, willDestroyElement() { const bodyClass = this.get('bodyClass'); if (bodyClass) { Ember.$('body').removeClass(bodyClass); } } });路线的模板），就像这样

player

要将类应用于父元素，可以使用{{body-class bodyClass='player-page-active'}}，但使用body更可靠。请注意，此组件将创建一个空div，但它不应该是一个问题（在极少数情况下，如果需要，可以使用this.$().parent()和css进行修复）。

Answer 3

Sukima建议查看currentRouteName，然后我找到hschillig's solution，我根据我的情况进行了简化。在控制器中，我创建了一个isShow函数：

export default Ember.Controller.extend({
  routing: Ember.inject.service('-routing'),

  isShow: function() {
    var currentRouteName = this.get('routing').get('currentRouteName');
    return currentRouteName === 'list.show';
  }.property('routing.currentRouteName'),

在模板中，我现在使用if帮助程序：

  <div class="panelList {{if isShow 'right'}}">

RustyToms的答案消除了向Controller添加功能的需要，但代价是语义较少。

当路由是第一个加载的路由时，如何在父元素上设置类？

3 个答案: