如何在加载 ember 车把模板后运行自定义 javascript？答案

【问题标题】：How do I run custom javascript after ember handlebars template has loaded?如何在加载 ember 车把模板后运行自定义 javascript？
【发布时间】：2015-01-09 06:59:01
【问题描述】：

我正在尝试加载从 Zurb Foundation 框架（CSS/UI 引导程序）继承的 Javascript，特别是到 handle "equalization" of cell heights in a grid。他们的库主要是 CSS，非常适合 ember，但其中一些需要 Javascript 才能完成。

在我的应用程序中，我有路由器、路由、模型、控制器和模板。到目前为止，我还没有视图或组件（文档也没有明确说明它们是我应该使用的）。

我的控制器/路由/模板中是否有办法检测特定模板已完成加载，并运行一些自定义 Javascript？

我需要运行的自定义 Javascript：

$(document).foundation()

// OR, for speed's sake a more limited reload:
$(document).foundation('equalizer', 'reflow');

【问题讨论】：

如您所见，它作为某种 jQuery 插件加载。但是，如果我需要做某种 DI 来获取 jQuery 对象，我自己可能会弄明白。将其包含在任何答案中都没有什么坏处，但没有必要:)
这似乎是相关的，但我仍然很困惑我是否使用视图，特别是因为 Ember 在去年发生了很大变化：stackoverflow.com/questions/19166641/…

标签： jquery ember.js zurb-foundation

【解决方案1】：

didInsertElement 有时无法正常工作，特别是如果您有嵌套视图，例如 form inputs 或 view 在 {{#each}} 中呈现。我建议你运行这样的东西

 didInsertElement : function(){
    this._super();
    Ember.run.scheduleOnce('afterRender', this, this.afterRenderEvent);
  },
  afterRenderEvent : function(){
    this.$(document).foundation('equalizer', 'reflow');
  }

你甚至可以让它更通用，按照说明there 我认为这是解决这种经常性问题的最佳做法

【讨论】：

我必须使用this.$(document).foundation('equalizer', 'reflow') 才能工作，但它肯定是在调用我的脚本。谢谢！
@MerlynMorgan-Graham 我对你的工作感到满意。我很抱歉。
根据这个 PR，github.com/emberjs/ember.js/issues/5631，嵌套视图顺序问题似乎（部分？）在 Ember 1.8.0 中得到解决。刚刚浏览了代码，didInsertElement 在 insertElement 调用结束时被调用，这是在afterRender 队列开始之前正确，现在didInsertElement 在 child-to 中被调用-父母订单。除非afterRender 队列中的某些内容在之后完成后可能与我的呼叫发生冲突，否则我认为排队是不必要的。
哦，我刚刚意识到我必须调用this.$(document). 的原因是因为我只是为了运行该脚本而将我的视图构建为作弊，而视图没有插入元素我'米目标。如果我正确使用视图，我可能会获得更好的性能；）干杯！
好吧，我在四个多月前遇到了这个问题：]，因为发现我在使用嵌套视图时一直在使用它是一个非常糟糕的错误。

【解决方案2】：

您需要等到 ember 将 DOM 添加到要调用 jQuery 代码的页面。

使用一个组件并在 didInsertElement 钩子中调用该函数。

类似的东西。

equalizer: function(){
  this.$().foundation('equalizer', 'reflow');
}.on('didInsertElement')

【讨论】：