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

我有一个函数可以更改类的css，我希望在路由更改时调用该函数。我还希望将此逻辑放置在ApplicationView中，以便在路由更改的任何位置调用它

被函数更改的类（我们称之为类

.float right col

）在我的应用程序中的每个

.hbs

模板上创建一次

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

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

最后，上面提到的伪代码将有另一个条件

&

，要求屏幕>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;
  }
}

---

您可以观察ApplicationController中的

currentPath

，并对任何更改做出反应

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

---

“路由更改”是什么意思？只要所有“路由”都有相同的样式表文件，媒体查询就可以在每个“路由”上运行。如果您正在使用SPA，并且希望在“路由”更改时立即抛出事件，那么您应该查看框架的API，它可能会公开这样的事件。另一种方法是使用

setInterval

，检查

窗口位置是否已更改，然后自己抛出事件。@LinuxN00b我确实在标记中提到了框架。余烬js@PabloMat当url发生变化时，我会选择阿斯戈麦斯。因此，从users.hbs->locations链接。hbs@Kevkong我的每个路线都有相同的样式表，但它不起作用。你能解释一下什么是水疗吗？这很有效！我遇到的一个问题是，当我路由到根“/”时，它并不认为我在更改路由。这有什么好办法吗？很抱歉，我是一个愚蠢的人，但我似乎无法让它发挥作用。我还发现，这种css更改在其他页面（如
/users
）中没有出现，但在
/records
中，它确实有效。不过我想我已经把问题缩小了。每次我更改路由时都会调用该函数，但可能它认为
用户
我用Jquery调用的
.float right col
与
/users
中的
float right col
是不同的
用户
你想实现这样的目标吗。调整浏览器窗口的大小以查看效果。是的，使用该示例中的侧边栏。当屏幕变小时，我使用
right
将部分列移出屏幕。然后我会向您推荐关于多设备布局的web基础知识。在您的情况下，媒体查询将是解决问题的正确方法。
App.ApplicationController = Ember.Controller.extend({
  currentPathChanged: function() {
    console.log(this.get('currentPath'));
  }.observes('currentPath')
});