使用Ember.js,如何在渲染视图后运行一些JS?

在将Ember视图插入到DOM后,如何运行函数?

这里是我的用例:我想使用jQuery UIsorting来允许sorting。

您需要重写didInsertElement因为它是“当视图的元素已经插入到DOM中时调用的。重写此函数以执行需要文档体中的元素的任何设置”。

didInsertElementcallback中,可以使用this.$()来获取视图元素的jQuery对象。

参考: https : //github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/views/view.js

你也可以使用afterRender方法

 didInsertElement: function () { Ember.run.scheduleOnce('afterRender', this, function () { //Put your code here what you want to do after render of a view }); } 

您需要在视图中的didInsertElementcallback中激发任何您想要的didInsertElement

 MyEmberApp.PostsIndexView = Ember.View.extend({ didInsertElement: function(){ // 'this' refers to the view's template element. this.$('table.has-datatable').DataTable(); } }); 

Ember 2.x:视图已弃用,请改用组件

您必须了解组件的生命周期,以了解某些事情何时发生。

当组件被渲染,重新渲染并最终被移除时,Ember提供了生命周期钩子,允许您在组件生命周期的特定时间运行代码。

https://guides.emberjs.com/v2.6.0/components/the-component-lifecycle/

通常, didInsertElement是与第三方库集成的好地方。

这钩子保证两(2)件事情,

  1. 该组件的元素已被创build并被插入到DOM中。
  2. 组件的元素可以通过组件的$()方法访问。

在你需要JavaScript来运行时,只要属性改变

didRender钩子里运行你的代码。

请再次阅读上面的生命周期文档以获取更多信息