Change URL without transition

8
votes

I have a question concerning the Ember routing system.

In my Ember-App, I have a simple leaflet fullscreen map. The center and zoom level of this map are coming from the URL query parameters. Now it would be nice to have a simple way to keep this query parameters in sync with the map position. So when somebody moves the map, I would like to change the url query parameters to the new values.

When I use a simple transitionTo, I start a loop of changing the map and updating the query parameters changing the map again and so forth.

So my first idea was to get the location implementation from the router and changing the url manually. But I do not know how to do that. And it also feals wrong using Ember this way.

3
ember.jsrouting
history api? I think you looking for history api. - user2547526
You should not update the URL manually with the location object or something like that. The way to influence the appearance in Ember is the use of routes and add dynamic segments to them. - mavilein
Have a look at the following links: stackoverflow.com/questions/15165072/… mavilein.github.io/javascript/2013/09/28/… - mavilein
And this one -> stackoverflow.com/questions/18164461/… Those links contain all the ingredients you need. If you have problems, create a JSFiddle or JSBin and i can help you work out a basic example. - mavilein
Thank you for the links, but that does not help me here. I don't want Ember to change the apps appearance. What I was looking for is a way to only change the url for having a permalink to the visible map. - Johnny

3 Answers

8
votes

After many downvotes to my answer above, in Ember you could also do this so you don't go through a transition or reloading data / rendering

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

Or for legacy browsers access the hash:

Ember.run(function(){
    location.hash = 'foo';
});
3
votes

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

Defined in packages/ember-routing/lib/location/history_location.js:134

I haven't tested this but:

Ember.HistoryLocation.replaceState(<string>);

should work.

Also my colleague recommends using the router to accomplish this:

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

router.replaceWith('index');
2
votes

To add on previous answers, of using the straight forward approach of changing the URL when you want to change the URL, on current Ember versions there is an option of linking query parameters to controller properties.

A simple example compiled from the 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')
});

When using query params this way, controller/view code can just change the bound controller properties and query parameters will update automatically.

Use the Ember.Route queryParams property to change the way query parameters effect route events as follows:

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

This will tell Ember to reload needed parts from server when tilting the map, but not when changing the zoom. Also, changing parameters will not push state items to browser history.