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

Question

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

这是我的用例：我想使用jQuery UI可排序来允许排序。

- Marc Hughes

Answer 1

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

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

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

- Roy Daniels

---

在你重写 didInsertElement 方法中，你可以引用 this.$() 来获取 DOM 元素的 jQuery 封装对象。 - Luke Melia

Marc: 你可能也会发现这篇文章有用。在我需要让JUI和SC2工作时，它帮助了我。注意：由于这篇文章的撰写时间较早，一些api可能已经发生变化，因此代码不能直接复制粘贴。http://yehudakatz.com/2011/06/11/using-sproutcore-2-0-with-jquery-ui/ - Roy Daniels

我在模板中呈现了一个模型数组的视图。我在didInsertElement函数上设置了断点，发现它在元素列表呈现之前就会触发。我需要在每个更改后执行一些逻辑。有什么方法可以实现这个需求吗？ - miguelcobain

miguelcobain - 我也遇到了同样的问题，你有解决办法吗？我需要在视图的didInsertElement触发后加载的项目列表上执行jQuery逻辑。 - jdcravens

没关系...解决方案在这里有非常好的文档记录：https://dev59.com/B2vXa4cB1Zd3GeqPMszD#13857859 - jdcravens

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
    });
}

- Jyoti

Answer 3

Ember 2.x: 视图已弃用，请使用组件替代

你需要理解组件的生命周期，才能知道某些事情何时发生。

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

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

通常来说，didInsertElement 是与第三方库进行集成的绝佳时机。

这个钩子保证了两件事情：

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

如果你需要在属性变化时运行 JavaScript

请在 didRender 钩子函数中运行你的代码。

再次强调，请仔细阅读上述生命周期文档以获取更多信息。

- XY Li

Answer 4

从Ember 3.13开始，您可以使用继承自Glimmer的组件。以下示例展示了可能的外观：

import Component from '@glimmer/component';
import { action } from '@ember/object';

/* global jQuery */

export default class MyOctaneComponent extends Component {
  @action configureSorting(element) {
    jQuery(element).sortable();
  }
}

<div {{did-insert this.configureSorting}}>
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

这些视图样式组件没有直接的生命周期钩子，而是可以使用render-modifiers来附加函数。关于未经官方介绍的修饰符可以在此处找到。

好处在于，模板的责任变得更加清晰明确。

如果您想尝试一下，这里有一个可运行的codesandbox： https://codesandbox.io/s/octane-starter-ftt8s。

- NullVoxPopuli

Answer 5

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

MyEmberApp.PostsIndexView = Ember.View.extend({

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

});

- sergserg

---

如果你像这样调用它，你需要在顶部添加 this._super()。 - SwarmIntelligence