在EmberJS中檢測URL更改和抓取URL（使用Discourse）

我使用建立在EmberJS上的Discourse（http://www.discourse.org/），並隨時嘗試觀察URL的變化，例如，當打開一個新的話題。我見過的答案觀察currentPath，例如這裏： Detect route transitions in EmberJS 1.0.0-pre.4 在EmberJS中檢測URL更改和抓取URL（使用Discourse）

App.ApplicationController = Ember.Controller.extend({ 

    routeChanged: function(){ 
    // the currentPath has changed; 
    }.observes('currentPath'); 
});

但我試圖檢測任何 URL變化，不只是一個路徑的變化。作爲對這個問題的答案的評論提到：

例如從 /pages/1過渡到/pages/2因爲路徑保持相同時，該觀察不火： pages.page.index

我會喜歡做的是實際檢測那些不會被observes('currentPath')觸發的上述轉換。根據這些原則，如果我在我的函數中使用this.get('currentPath');，我會得到類似topic.fromParams的內容，但我確實對URL路徑感興趣。 /t/this-is-my-url-slug。

簡單地說，我想，當應用程序從去檢測：

/t/this-is-my-url-slug

到

/t/another-url-slug

和能夠捕捉到的路徑：/t/another-url-slug

對不起，但我有點Ember n00b，我唯一的經驗就是通過Discourse。有任何想法嗎？

來源

2013-05-15 kaptron

你有看看這個http://stackoverflow.com/questions/16471068/how-do-i-retrieve-the-path-of-a-route/16471545#16471545？ – intuitivepixel

如果你的用例更具通用性，你也可以使用'window.location.href'和'hashchange'事件並在URL字符串上做一個「」.split（'＃'）......只是想着 – intuitivepixel

Didn'看到那個，不。這是一種計算URL的潛在方式，但僅currentPath是不夠的，我還需要有模型。 'topic.fromParams'不能單獨生成路由，除非我知道哪個主題ID，並且我無法弄清楚如何檢測當前params中的哪個主題。這是使用Ember路由，它不使用散列路由，而是正確形成路由，例如'localhost/t/slug'，所以散列變化檢測將不起作用。 – kaptron

的解決方案是非常具體的，以話語（而不是一般到EmberJS），但話語一個被稱爲URL相關函數的URL名稱空間（/components/url.js）。有一個routeTo(path)函數在每次加載新路由時都會被調用。所以，我能夠添加自己的功能，還有內部，從而確保：

我的函數都會被調用一個話語路線改變
時間我可以捕獲path本身（即網址）

來源

2013-05-16 18:56:06 kaptron

你不需要任何東西Ember特定的做到這一點。根據您是否使用散列或pushState的，可以使用...

$(window).on('hashchange', function(){ 
    console.log("Hash URL is " + location.hash.substr(1)); 
    // Do stuff 
});

或

$(window).on('popstate', function(e) { 
    console.log("Hash URL is " + window.location.pathname); 
    // Do stuff 
});

來源

2013-05-16 04:23:14

謝謝，這很有幫助。不知道爲什麼，但popstate似乎並沒有被觸發，除了在初始頁面加載。 – kaptron

嗯，我很驚訝。似乎與文檔不同https://developer.mozilla.org/en-US/docs/DOM/window.onpopstate –

謝謝！快速簡單的解決方案。 – heyjinkim

對於Luke Melia的回答，您沒有做任何拆卸操作，以防止在使用瀏覽器後退按鈕時導致內存泄漏而不會導致問題。

如果您的應用程序需要在全局範圍內使用此功能，並且您只想使用此事件來調用一個功能，那麼就可以。但是，如果你想在離開路線時斷開（），當你不需要它的時候你應該把它撕下來），你會用燼來引發錯誤。特別是在嘗試使用瀏覽器後退按鈕時。

更好的方法是利用事件總線並將事件代理到不會導致後退按鈕出現問題的事件。

$(window).on('hashchange', function(){ 
     //Light weight, just a trigger 
     $(window).trigger('yourCustomEventName'); 
    });

然後當你要聽散列你聽你的自定義事件的變化，那麼其摧毀是不需要的時候。

輸入路線A：

$(window).on('yourCustomEventName', function(){ 
     // Do the heavy lifting 
     functionforA(); 
    });

離開路線A：

$(window).off('yourCustomEventName');

輸入路線B：

$(window).on('yourCustomEventName', function(){ 
     // Do the heavy lifting maybe it's different? 
     functionforB(); 
    });

離開路線B：

$(window).off('yourCustomEventName');

來源

2014-02-19 01:22:27 Charlie

另外，我使用一個對象來代理事件。 'window.Bus = {};'然後代理事件到這個總線。我也使用這個總線來幫助管理同步性。 – Charlie

在EmberJS中檢測URL更改和抓取URL（使用Discourse）

回答

相關問題