Question

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

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

提前致谢

Answer 1

我有一个ember twiddle，我相信，它会做你正在寻找的东西，但首先我想说没有直接的方法可以做你所要求的，因为它是与SPA的目的相反。

数据绑定（不刷新视图）通常是SPA的一个福音，SPA很难避免强行重新加载/刷新/重新渲染视图。我花了一段时间才找到问题的解决方案，因为它似乎违背了Ember的设计原则。甚至像route refresh()这样的钩子也意味着更新模型和绑定数据，而不是重新加载模板。

Although other people have asked之前的相同问题，似乎大多数答案都会引导用户走向不刷新整个观点。通常情况下，刷新视图的理想是不正确的假设。

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

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

那就是说，我能够完成你要求使用的内容（在我看来，一个hack ）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时，模型之间切换的行为会更加自然。

Answer 2

基于有限的背景，我认为你想要完成的是刷新（https://emberjs.com/api/ember/2.15/classes/Ember.Route/methods/refresh?anchor=refresh）

您能详细描述一下您正在回复的行动类型，以及您想要更新的内容吗？

根据插件的不同，您可能需要查看以下文章：https://www.sitepoint.com/how-to-integrate-jquery-plugins-into-an-ember-application/

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

2 个答案: