使用Ember.js的Hashbang URL

时间:2013-02-18 03:47:53

标签: ember.js ember-router hashbang

我正在尝试将Router设置为使用“hashbang”网址(#!)。

我试过这个,但显然它不起作用:

App.Router.map(function() {
    this.route("index", { path: "!/" });
    this.route("otherState", { path: "!/otherState" });
});

这可以在Ember做吗?

2 个答案:

答案 0 :(得分:19)

Teddy Zeenny的回答大多是正确的,registerImplementation似乎是一种干净的方式来实现这一点。我试着编辑他的答案,使其完全回答问题,但我的编辑被拒绝了。

无论如何,这里是使Ember使用hashbang网址的完整代码:

(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;
    }

}));

})();

然后,一旦您创建了应用程序,您需要更改路由器以使用“hashbang”位置实现:

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

答案 1 :(得分:10)

扩展Ember.HashLocation将是最佳选择。

对于干净的实施,您可以执行以下操作。

Ember.Location.registerImplementation('hashbang', Ember.HashLocation.extend({
  // overwrite what you need, for example:
  formatURL: function(url) {
    return '#!' + url;
  }
  // you'll also need to overwrite setURL, getURL, onUpdateURL...
})

然后指示您的应用路由器使用您的自定义实施进行位置管理:

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