ember.js - In Ember, is there a way to update a component without a full re-render/route transition -

i have map application. when clicking on pin, want update "teaser" component in template supplying e.g. query parameter previewid without triggering full re-render of route, because re-initialize map , center on init position, take lot of time, in short: ugly , bad user experience.

so have map route:

export default ember.route.extend({     model: function () {             return this.store.findall('map-object-proxy');     } }); 

a map controller, handle query params:

export default ember.controller.extend({     queryparams: ['previewid'],     previewid: null,      previewobject: ember.computed('previewid', function () {         return this.store.findrecord('map-object', 1);     }) }); 

and map-panel component gets handed previewobject map.hbs template:

<div id="map"></div>  <!-- ... -->  <div class="row" id="teaser-header">     <div class="col-xs-12">{{previewobject.someproperty}}</div> </div> 

map.hbs has handlebars markup:

{{map-panel elementid="map-panel" objectproxies=model previewobject=previewobject}} 

sorry, i've not yet quite come terms ember's component architecture, more controllers deprecated , somehow seem act fifth wheel.

thanks!

you can "refresh" component wrapping this:

{{#if refresh}}     //component template {{/if}} 

and action hide , show component, forcing render again.

const _this = this; this.set('refresh', false); ember.run.next(function () {         _this.set('refresh', true);     });