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.

回答1:

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

回答2:

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

回答3:

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.

来源：https://stackoverflow.com/questions/19076834/change-url-without-transition

标签

ember.js

routing