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

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
}

为简单起见我遗漏的信息（可选）又名大图：

最终上面提到的伪代码会有另一个条件&&，要求屏幕大于800px。

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')
});