如何在加载 ember handlebars 模板后运行自定义 javascript？

Question

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

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

在我的 controller/route/template 中有没有办法检测特定模板已完成加载，并运行一些自定义 Javascript？

自定义Javascript我需要运行：

$(document).foundation()

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

Answer 1

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

使用组件并在 didInsertElement 挂钩中调用函数。

像这样。

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

Answer 2

didInsertElement 有时无法正常工作，尤其是当您有嵌套视图时，例如 form inputs 或 view 在 {{#each}} 中呈现。我会建议你运行这样的事情

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

您甚至可以使其更通用，请按照说明进行操作 there 我认为这是解决此类反复出现问题的最佳做法

如何在加载 ember handlebars 模板后运行自定义 javascript？

How do I run custom javascript after ember handlebars template has loaded?

jquery

ember.js

zurb-foundation