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

Posted 2023-02-19

【中文标题】使用 Ember.js，如何在渲染视图后运行一些 JS？

【英文标题】：Using Ember.js, how do I run some JS after a view is rendered?

【发布时间】：2012-02-11 10:55:12

【问题描述】：

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

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

【参考方案1】：

从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 附加一个函数。修饰符非官方介绍can be found here

这样做的好处是，更清楚模板的职责是什么，变成什么。

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

【参考方案2】：

Ember 2.x：视图已弃用，改用组件

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

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

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

一般来说，didInsertElement 是与 3rd 方库集成的好地方。

这个钩子保证两 (2) 件事，

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

你需要在属性发生变化时运行 JavaScript

在didRender hook 中运行您的代码。

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

【参考方案3】：

也可以使用afterRender方法

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

【参考方案4】：

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

MyEmberApp.PostsIndexView = Ember.View.extend(

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

);

【讨论】：

如果这样调用，需要在顶部加上this._super()。

【参考方案5】：

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

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

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

【讨论】：

在您对 didInsertElement 的覆盖中，您可以引用 this.$() 来获取 DOM 元素的 jquery 包装器句柄。

Marc：您可能会发现这篇文章也很有用。当我不得不让 JUI 和 SC2 工作时，它帮助了我。注意：自撰写本文以来，某些 api 可能已更改，因此可能不会剪切和粘贴代码。 http://yehudakatz.com/2011/06/11/using-sproutcore-2-0-with-jquery-ui/

非常感谢！这个答案加上这两个 cmets 真的帮助我解决了这个问题。到目前为止，EmberJS 社区的支持给我留下了深刻的印象。

我很高兴找到了这个。感谢@LukeMelia，我想知道如何获取对 DOM 元素的引用。

我有一个视图，在它的模板中渲染了一组模型。我在 didInserElement 函数上放了一个断点，我可以看到它在元素列表呈现之前触发。我需要在每次更改后执行一些逻辑。有没有办法做到这一点？