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

Question

I have a map application. When clicking on a pin, I want to update a "teaser" component in the template by supplying e.g. a query parameter previewId without triggering a full re-render of the route, because that would re-initialize the map and center it on the init position, take a lot of time, in short: is ugly and bad user experience.

So what I have is a map route:

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

a map controller, where I handle the query params:

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

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

and a map-panel component which gets handed the previewObject from the 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 this Handlebars markup:

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

Sorry, I've not yet quite come to terms with ember's component architecture, even more so as controllers will be deprecated soon and somehow seem to act like a fifth wheel.

Thanks!

Answer 1

You can "refresh" your component by wrapping it like this:

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

and then an Action to hide and show the component, forcing it to render again.

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