我希望在路由變化

我改變一類的CSS功能，並觸發我的功能我想該功能被稱爲隨時隨地那路由變化。我也希望將這個邏輯放置在ApplicationView中，以便在路由發生變化時隨時隨地調用它。我希望在路由變化

在我的應用程序的每個.hbs模板上都會創建一次被該函數修改的類（我們稱之爲.float-right-col）。

<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加載，則該函數將被調用，這使得浮子右-COL過渡到新的位置。

要切換此元素i添加的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; 
    } 
}

來源

2014-07-24 Ian Steffy

你是什麼意思的「路線變化」？ –

只要您的所有「路線」具有相同的樣式表文件，媒體查詢應該適用於每個「路線」。如果您正在使用SPA並希望在「路由」更改後立即拋出一個事件，則應該查看您的框架的API，可能會暴露這樣的事件。另一種方法是使用'setInterval'並檢查'window.location'是否已經改變並且自己拋出事件。 – Kevkong

@ LinuxN00b我提到了標籤中的框架。 Ember.js –

的初始加載

您可以觀察ApplicationController中的currentPath，並對任何更改作出反應。

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

來源

2014-07-24 16:51:19 Oliver

This Works！我遇到的一個問題是，當我路由到根目錄'/'時，它不認爲我正在改變路線。對此有沒有很好的解決辦法？ –

你可以創建一個jsbin向我們展示行爲？ – Oliver

對不起，這樣的jsbin noob，但我似乎無法得到它的工作。我也看到這個CSS變化不會出現在像'/ users'這樣的其他頁面中，但是在'/ records'中它可以工作。我想我已經縮小了這個問題。我每次更改路由時都會調用該函數，但也許它認爲'用戶'中的'.float-right-col'與Jquery調用的不是'/用戶'中的'float-right-col' –

我希望在路由變化

回答

相關問題