CODEWITHSUNDEEP
ember.jsroutes
Johnny
Johnny

Reputation: 578

Change URL without transition

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.

Upvotes: 8

Views: 9744

Answers (3)

amotzg
amotzg

Reputation: 1202

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.

Upvotes: 2

Michael Benin
Michael Benin

Reputation: 4332

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';
});

Upvotes: 8

Michael Benin
Michael Benin

Reputation: 4332

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');

Upvotes: 3

Related Questions