2013-09-29 27 views
7

我有一个关于Ember路由系统的问题。没有转换的更改URL

在我的Ember-App中,我有一个简单的单张全屏地图。该地图的中心和缩放级别来自URL查询参数。现在有一个简单的方法来保持这个查询参数与地图位置同步是很好的。所以当有人移动地图时,我想将url查询参数更改为新值。

当我使用简单的transitionTo时,我开始一个更改地图并更新查询参数的循环,再次更改地图等等。

所以我的第一个想法是从路由器获取位置实现并手动更改网址。但我不知道该怎么做。而且这种方法也可以避免使用Ember。

+0

你不应该用位置对象或类似的东西手动更新URL。影响Ember外观的方法是使用路线并为其添加动态片段。 – mavilein

+0

看看下面的链接:http:// stackoverflow。com/questions/15165072/is-resource-nesting-the-only-way-to-enable-multiple-dynamic-segments/15174766#15174766 http://mavilein.github.io/javascript/2013/09/28/三步到烬 - js-seo-friendly-urls/ – mavilein

+0

而这一个 - > http://stackoverflow.com/questions/18164461/how-do-you-maintain-the-page-state-so- that-you-can-provide-permalinks-using-emb/18249404#18249404 这些链接包含所有你需要的成分。如果您遇到问题,请创建一个JSFiddle或JSBin,我可以帮助您制定一个基本示例。 – mavilein

回答

7

许多downvotes给我的回答后上方,在灰烬你也可以这样做,所以你不通过走转换或重新加载数据/渲染

Ember.run(function(){ 
    window.history.replaceState({} , 'foo', '/foo'); 
}); 

或为旧浏览器访问的散列:

Ember.run(function(){ 
    location.hash = 'foo'; 
}); 
+0

'window.history.replaceState({},'foo','/ foo');'对我很好 – mihai

3

http://emberjs.com/api/classes/Ember.HistoryLocation.html#method_replaceState

在包中定义/烬路由/ lib目录/位置/ history_location.js:134

我没有测试过这一点,但:

Ember.HistoryLocation.replaceState(<string>); 

应该工作。

而且我的同事建议使用路由器来实现:

http://emberjs.com/blog/2013/02/15/ember-1-0-rc.html#stq=&stp=0

router.replaceWith('index'); 
+0

听起来很有希望。你有一个想法如何访问该位置?也许通过路线中的动作?我对Ember非常陌生,正在寻找某种最佳实践。 – Johnny

+0

是的,我在重新加载地图的代码中犯了一个错误。我现在修正了它,正如你所说的使用'router.replaceWith('index')'来改变URL。谢谢! – Johnny

+0

当新路线与旧路线相同时,路线替换似乎不适用于我。这是正常还是我错过了什么? – elsurudo

2

要添加以前的答案,使用直接更改URL的方法来更改URL时,在当前的Ember版本中,可以选择将查询参数链接到控制器属性。

一个简单的例子从Ember guide page编译:

App.MapController = Ember.ObjectController.extend({ 
    queryParams: ['zoom', {latitude: 'lat'}, {longitude: 'lon'}], 

    zoom: 10, 
    latitude: null, 
    longitude: null, 

    mapWindowChanged: function { 
    MapApi.reposition(this.zoom, this.latitude, this.longitude); 
    }.observes('zoom','latitude','longitude') 
}); 

当使用查询参数这种方式,控制器/视图代码可以只是改变结合的控制器属性和查询参数将自动更新。

使用Ember.Route queryParams property方式的转变,查询参数的影响路径事件如下:

App.MapRoute = Ember.Route.extend({ 
    queryParams: { 
    lat: { 
     refreshModel: true, 
     replace: true, 
    }, 
    long: { 
     refreshModel: true, 
     replace: true, 
    }, 
    zoom: { 
     replace: true 
    } 
    } 
}); 

这将告诉灰烬倾斜地图时从服务器重新加载所需的部件,但不改变变焦时。此外,更改参数不会将状态项推送到浏览器历史记录。