Question

我正在尝试加载从Zurb Foundation框架（CSS / UI bootstrap）继承的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');

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把手模板后运行自定义javascript？

2 个答案: