Question

如何在将Ember View插入DOM后运行函数？

这是我的用例：我想使用jQuery UI进行排序。

Answer 1

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

在didInsertElement回调中，您可以使用this.$()获取视图元素的jQuery对象。

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

Answer 2

您也可以使用afterRender方法

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

Answer 3

从Ember 3.13开始，您可以使用从Glimmer继承的组件，下面的示例显示了这样的样子：

using HoloToolkit.Unity.InputModule;

这些视图样式组件没有直接的生命周期挂钩，而是可以使用render-modifiers来附加功能。非官方介绍修饰符can be found here

这样做的好处是，可以更清楚地知道模板的职责是什么。

如果您想玩这个，这里是一个可运行的codeandbox： https://codesandbox.io/s/octane-starter-ftt8s

Answer 4

您需要在视图中的didInsertElement回调中触发您想要的任何内容：

MyEmberApp.PostsIndexView = Ember.View.extend({

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

});

Answer 5

Ember 2.x：不推荐使用View，而是使用组件

您必须了解组件的生命周期才能知道某些事情何时发生。

随着组件的渲染，重新渲染和最终删除，Ember提供了生命周期钩子，允许您在组件的生命周期中的特定时间运行代码。

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

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

这个钩子保证了两（2）个东西，

已创建组件的元素并将其插入DOM。
可以通过组件的$()方法访问组件的元素。

只要属性发生变化，您就需要运行JavaScript

在didRender hook。

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

使用Ember.js，如何渲染视图后运行一些JS？

5 个答案: