我希望在路线改变时触发我的功能

Question

我有一个更改类的css的函数，我希望在路由更改的任何时候将该函数称为。我还希望将此逻辑放在ApplicationView中，以便在路径更改的任何时间随地调用它。

我的应用中的每个.float-right-col模板都会创建一个由该函数更改的类（我们称之为该类.hbs）。

<div class="float-right-col">
</div>

我想要的伪代码

Whenever we are transitioned to a new route {
  Set the css of float-right-col to this by toggle classes with overriding attributes
}

为了简单起见我遗漏的信息（可选） AKA The Big Picture：

最终，上面提到的伪代码将有另一个条件&&，要求屏幕为＆gt; 800像素。

Whenever we are transitioned to a new route {
  check if the screen size is below 800px & if it is {
    Set the css of float-right-col to this
  }
}

理想情况下，css只知道屏幕大小并在页面加载前调整css。 使用上面的伪代码，页面将加载默认的css，然后调用函数，使float-right-col转换到新的位置。

要切换此元素的css，我将这两个类添加到.float-right-col并将其删除。

 .openCol {
    position:absolute;
    right: 0px;
    transition: all .2s ease 0s;
  }
  .closeCol {
    position:fixed;
    right: -290px;
    transition: all .2s ease 0s;
  }  

我也尝试过使用.css（）

最后，我尝试了媒体查询，但这些似乎只适用于第一页的初始加载

@media screen and (max-width: 800px) {
  .float-right-col {
    position: fixed !important;
    right: -290px;
  }
}

Answer 1

您可以在ApplicationController中观察currentPath并对任何更改做出反应。

App.ApplicationController = Ember.Controller.extend({
  currentPathChanged: function() {
    console.log(this.get('currentPath'));
  }.observes('currentPath')
});