Is there a way in Ember to update a component without completely redistributing / transitioning a route

Question

I have a map application. When you click on a contact, I want to update the teaser component in the template by providing, for example, a query parameter previewId, without causing a complete re-visualization of the route, because this will re-initialize the map and center it at the initialization position, it will take a lot of time, one in a word: ugly and poor user experience.

So, I have a map route:

export default Ember.Route.extend({
    model: function () {    
        return this.store.findAll('map-object-proxy');
    }
});

map controller, where I process the request parameters:

export default Ember.Controller.extend({
    queryParams: ['previewId'],
    previewId: null,

    previewObject: Ember.computed('previewId', function () {
        return this.store.findRecord('map-object', 1);
    })
});

and the map panel component to which PreviewObject from the map.hbs template is passed:

<div id="map"></div>

<!-- ... -->

<div class="row" id="teaser-header">
    <div class="col-xs-12">{{previewObject.someProperty}}</div>
</div>

map.hbs has this Handlebars markup:

{{map-panel elementId="map-panel" objectProxies=model previewObject=previewObject}}

, , , - , .

!

Answer 1

"" , :

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

, , .

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