Hashbang URLs using Ember.js

by

Teddy Zeenny’s answer is mostly correct, and registerImplementation seems to be a clean way to implement this. I tried to just edit his answer to make it fully answer the question, but my edit got rejected.

Anyway here is the full code to make Ember use hashbang URLs:

(function() {

var get = Ember.get, set = Ember.set;

Ember.Location.registerImplementation('hashbang', Ember.HashLocation.extend({ 

    getURL: function() {
        return get(this, 'location').hash.substr(2);
    },

    setURL: function(path) {
        get(this, 'location').hash = "!"+path;
        set(this, 'lastSetURL', "!"+path);
    },

    onUpdateURL: function(callback) {
        var self = this;
        var guid = Ember.guidFor(this);

        Ember.$(window).bind('hashchange.ember-location-'+guid, function() {
                Ember.run(function() {
                    var path = location.hash.substr(2);
                    if (get(self, 'lastSetURL') === path) { return; }

                    set(self, 'lastSetURL', null);

                    callback(location.hash.substr(2));
                });
        });
    },

    formatURL: function(url) {
        return '#!'+url;
    }

}));

})();

Then once you create your app you need to change the router to utilize the “hashbang” location implementation:

App.Router.reopen({
    location: 'hashbang'
})

More Related Contents:

  1. Right way to do navigation with Ember
  2. Ember-data embedded records current state?
  3. How to use multiple models with a single route in EmberJS / Ember Data?
  4. Ember component send action to route
  5. Using Ember.js, how do I run some JS after a view is rendered?
  6. Get current route name in Ember
  7. Handling errors with the (now default) Ember Data JSON-API adapter
  8. emberjs – how to mark active menu item using router infrastructure
  9. Ember pagination full example
  10. infinite scroll with ember.js (lazy loading)
  11. How can an observer find out the before and after values of the observed property in Ember.js?
  12. Client-side Javascript app – url routing with no hash tag
  13. Is it possible to load a Handlebars template via Ajax?
  14. What is the purpose of the Ember.Container
  15. How to fire an event to Ember from another framework
  16. Difference between Ember.get() and this.get()
  17. How to use third party npm packages with ember cli app
  18. Positional index in Ember.js collections iteration
  19. What’s the shebang/hashbang (#!) in Facebook and new Twitter URLs for?
  20. EmberJS: How to load multiple models on the same route?
  21. SPA best practices for authentication and session management
  22. CRUD blueprint overriding in sails.js
  23. Doing links like Twitter, Hash-Bang #! URL’s [duplicate]
  24. Python script gives `: No such file or directory`
  25. PathLocationStrategy vs HashLocationStrategy in web apps
  26. Recommended way to include bootstrap library in Ember.JS ember-cli App
  27. Ember without Ember Data
  28. Ember.js and RequireJS
  29. ember.js + handlebars: render vs outlet vs partial vs view vs control
  30. Rendering resolved promise value in Ember handlebars template

Leave a Comment