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

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 并对任何更改使用react。

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