Question

我正在研究Ember项目并注意到一些奇怪的行为。我正在使用{{link-to}}帮助程序来构建我的所有应用内链接，当我在正确的页面上时，导航链接正确分配了active类。

然而，我注意到，只有在我点击页面之前，样式才会持续存在。当我点击其他任何东西时，样式消失了，但是这个类似乎仍然存在。

有什么我可能遗失的吗？我对Ember很新，而且我的大部分工作都是在几乎没有AJAX内容的网页上，所以我完全有可能错过一些非常简单的东西。

谢谢，

更新

有人指出我没有包含任何例子，但事实是应用程序是非常基本的。我刚开始编码并发现了这种行为。

我所做的唯一事情是：

使用带有ember new timeclock（我的应用程序名称）的ember-cli创建一个新的Ember应用程序
在我的Brocfile.js中包含Iconic.js和Bootstrap（对于Iconic.js，我只是将文件复制到vendor目录。对于bootstrap，我使用的是ember-cli-bootstrap-sassy加载项。

我有一个名为initialize-assets.js的初始化程序及其内容（正确加载Iconic.JS）：

import Ember from 'ember';

export default {
  name: 'initialize-assets',
  initialize: function() {
    Ember.Route.reopen({
      renderTemplate: function() {
        this._super();
        var initResources = function() {
          new IconicJS().inject('img.iconic');
        };
        Ember.run.scheduleOnce('afterRender', initResources);
      }
    });
  }
};

我还有一个我定义的自定义路由，以使Iconic.js正常工作：

import Ember from 'ember';

export default Ember.Route.extend({
  renderTemplate : function() {
    this.render();
    var myfunction=function() {
       new IconicJS().inject('img.iconic');
    };
    Ember.run.scheduleOnce('afterRender', initializeAssets);
  }
});

以下是application.hbs内容：

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      {{link-to 'Timeclock' 'index' class='navbar-brand'}}
    </div>
  </div>
</nav>

<div id="wrapper" {{bind-attr class='menuToggled'}}>
  <div id="sidebar-wrapper">
    <ul class="sidebar-nav">
      <li>
        <a {{action 'toggleMenu'}}>
          <img data-direction="left" data-head="line-large" data-src="icons/arrow-thick.svg" class="iconic iconic-sm" />
          Toggle Menu
        </a>
      </li>
      <li>
        {{#link-to 'index' class="active"}}
        <img data-src="icons/home.svg" class="iconic iconic-sm" />
        Home
        {{/link-to}}
      </li>
      <li>
        {{#link-to 'group.index'}}
        <img data-src="icons/people.svg" class="iconic iconic-sm" />
        Groups
        {{/link-to}}
      </li>
      <li>
        {{#link-to 'user.index'}}
        <img data-gender="genderless" data-src="icons/person.svg" class="iconic iconic-sm" />
        Users
        {{/link-to}}
      </li>
      <li>
        {{#link-to 'event.index'}}
        <img data-src="icons/list.svg" class="iconic iconic-sm" />
        Events
        {{/link-to}}
      </li>
    </ul>
  </div>

  <div id="page-content-wrapper">
    <div class="container-fluid">
      <div class="row">
        {{outlet}}
      </div>
    </div>
  </div>
</div>

{{link-to}}代码设置＆＃34;有效＆＃34;正确地上课，并且样式显示（但直到我点击其他东西）。

Answer 1

感谢您提供所有帮助，但是当我发布此消息时，我似乎睡不着觉。

我的SCSS样式使用:active选择器。我需要添加一个.active选择器。我昨晚睡不着觉时，结肠和时期看起来太相似了。当我将选择器添加到适用的规则时，一切都成功了。

在Ember车把模板中，＆＃34; .active＆＃34;造型不贴

更新

1 个答案: