ember.js - 在 Ember 中，有没有一种方法可以在没有完全重新渲染/路由转换的情况下更新组件

Question

我有一个 map 应用程序。单击图钉时，我想通过提供例如更新模板中的“预告”组件查询参数 previewId不触发路线的完全重新渲染，因为这会重新初始化 map 并将其以初始位置为中心，需要大量时间，简而言之:丑陋且糟糕的用户体验。

所以我有一个 map 路线:

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

一个 map Controller ，我在其中处理查询参数:

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

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

以及从 map.hbs 模板获取 previewObject 的 map 面板组件:

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

<!-- ... -->

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

map.hbs 有这个 Handlebars 标记:

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

抱歉，我还没有完全接受 ember 的组件架构，更何况 Controller 很快就会被弃用，而且不知何故似乎就像一个第五轮。

谢谢!

Answer 1

您可以通过像这样包装它来“刷新”您的组件:

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

然后是一个隐藏和显示组件的操作，强制它再次渲染。

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