如何在加载ember把手模板后运行自定义javascript?

时间:2015-01-09 06:59:01

标签: jquery ember.js zurb-foundation

我正在尝试加载从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');

2 个答案:

答案 0 :(得分:1)

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

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

像这样的东西。

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

答案 1 :(得分: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的说明,我认为这是这种经常出现问题的最佳做法