Detect capture and capture URLs in EmberJS (using Discourse)

Question

I use Discourse ( http://www.discourse.org/ ), which is built on EmberJS and tries to watch for URL changes at any time, for example when opening a new topic. I saw an answer for observing currentPath, for example, here: Detecting route transitions in EmberJS 1.0.0-pre.4

App.ApplicationController = Ember.Controller.extend({ routeChanged: function(){ // the currentPath has changed; }.observes('currentPath'); }); 

But I'm trying to detect any URL change, not just a path change. As mentioned in the comments to this answer:

This observer does not fire when switching from /pages/1 to /pages/2 , because the path remains unchanged: pages.page.index

What would you like to do is actually to discover that the above transitions that do not work with the help observes('currentPath') . Along these lines, if I execute this.get('currentPath'); inside my function, I get something like topic.fromParams , but I'm really interested in the URL path, for example. /t/this-is-my-url-slug .

Simply put, I would like to know when the application goes from:

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

to

 /t/another-url-slug 

and be able to fix the path: /t/another-url-slug

Sorry, but I'm a little Ember n00b, and my only experience with it is through Discourse. Any ideas?

Answer 1

The solution is fairly specific to Discourse (not General EmberJS), but Discourse has a URL namespace that is called for URL-related functions ( /components/url.js ). There is a routeTo(path) function that is called every time a new route is loaded. Therefore, I was able to add my own function inside, which ensures that:

• my function will be called every time the Discourse route changes
• I can capture the path itself (i.e. URL)

Answer 2

You do not need something special to do this. Depending on whether you use a hash or pushstate, you can use ...

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

or

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

Answer 3

With Luke Melia, answer that you don’t make any breaks to prevent memory leaks without causing problems when using the browsers return button.

If this is necessary globally for your application, and you want to use this event only to call one function, then good. But if you want to call () when you leave the route (which you must break when you don't need it), you will cause errors with ember. In particular, when trying to use the return button to the browser.

A better approach would be to use an event bus and a proxy server for an event that would not cause problems with the back button.

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

Then, when you want to listen to the hash changes, you listen to your custom event, and then tear it off when it is not needed.

Enter route A:

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

Leave route A:

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

Enter route B:

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

Leave route B:

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