Ember：模型更改时重新渲染路线的模板

Question

我注意到当模型更改时，路线不会重新渲染（即transitionTo 相同的路线与不同的模型）。我在特定页面上设置了一些 jQuery 插件，当模型更改时我需要它们重新渲染，因此它显示为新页面。

有没有办法做到这一点？也许通过观察模型的 ID 并以某种方式重新渲染路线？

提前致谢

Answer 1

我有一个ember twiddle，我相信它可以满足您的要求，但首先我想说的是，没有直接的方法可以满足您的要求，因为它与 相反SPA 的设计目的是什么。

数据绑定（不刷新视图）通常是 SPA 的一大优势，SPA 努力避免不惜一切代价强制重新加载/刷新/重新渲染视图。我花了一段时间才找到a 解决您的问题的方法，因为它似乎违反了 Ember 设计原则。甚至像 route refresh() 这样的钩子也是为了更新模型和绑定数据，而不是重新加载模板。

Although other people have asked 同样的问题之前，似乎大多数答案引导用户不刷新整个视图。通常，刷新视图的理想是一个错误的假设。

按照前面的示例，我建议您的目标不应该是完全刷新模板，而是要弄清楚如何使您的 jQuery 插件更好地适应单页应用程序/客户端JS 友好的设计 并将其重新加载为路由生命周期的自然部分。

例如，也许插件可以在afterModel() 或类似的地方重新加载/重置/重新运行。

也就是说，我能够使用Ember.run.later() 完成您要求的操作（在我看来，这是一种黑客行为），这样我就可以使 if 块无效并强制重新呈现内容.请注意，这通常不是用户想要的，因为（除了设计原则原因）它会导致 UI 闪烁。

我有一个这样的组件。

/* will-rerender.hbs */
{{#if show}}
    {{yield}}
{{/if}}

它有一个像这样的JS文件。

/* will-rerender.js */
import Ember from 'ember';

export default Ember.Component.extend({
  show: false,

  didReceiveAttrs() {
    this._super(...arguments);

    /* 
      Ugly hack, but we need to reset `show` in
      a separate run loop in order to force the view
      to rerender.
    */

    this.set('show', false);

    Ember.run.later(() => {
      this.set('show', true);
    });
  }
});

你可以这样调用它...

/* your template */
{{#will-rerender cacheKey=model.id}}
   ... your content to rerender ...
{{/will-rerender}}

每当model.id 更改时，组件将调用didReceiveAttrs() 导致show 无效并刷新视图。

顺便说一句，我认为使用{{link-to}} 而不是自己调用transitionTo 在模型之间切换的行为会更自然。