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

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

您还可以使用追随者方法

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 2.x：不建议使用视图，请改用组件

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

在渲染，重新渲染并最终删除组件时，Ember提供了生命周期挂钩，使您可以在组件生命周期中的特定时间运行代码。

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

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

此挂钩可保证两（2）件事情，

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

   在其中，只要属性发生更改，您就需要运行JavaScript

   在didRender挂钩中运行代码。

   再次，请阅读上面的生命周期文档以了解更多信息

Answer 4

从 Ember 3.13 开始，您可以使用从Glimmer继承的组件，下面的示例显示了如下内容： 通用标签

这些视图样式组件没有直接的生命周期挂钩，而是可以使用 render-修饰符以附加功能。“>的非正式介绍

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

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

Answer 5

您需要在视图的didInsertElement回调中触发所需的任何操作 通用标签