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

n3schb8v  于 2022-11-05  发布在  其他
关注(0)|答案(5)|浏览(167)

在将Ember View插入DOM后,如何运行函数?
以下是我的使用案例:我想使用jQuery UI sortable来允许排序。

ecfsfe2w

ecfsfe2w1#

您需要覆盖didInsertElement,因为它是“当视图的元素被插入到DOM中时调用。覆盖此函数以执行任何需要文档正文中的元素的设置。”
didInsertElement回调中,可以使用this.$()为视图的元素获取一个jQuery对象。
参考:https://github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/views/view.js

cwdobuhd

cwdobuhd2#

您也可以使用afterRender方法

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

zzlelutf3#

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

您必须了解组件的生命周期,才能知道某些事情何时发生。
随着组件的呈现、重新呈现和最终删除,Ember提供了生命周期钩子,允许您在组件生命周期的特定时间运行代码。
https://guides.emberjs.com/v2.6.0/components/the-component-lifecycle/
一般来说,didInsertElement是与第三方库集成的理想场所。
这个钩子保证了两件事,
1.组件的元素已创建并插入DOM。
1.可通过组件的$()方法访问组件的元素。

在中,您需要在属性变更时执行JavaScript

didRender挂钩内运行代码。

请再次阅读上述生命周期文档以了解详细信息

rm5edbpk

rm5edbpk4#

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来附加一个函数。
这样做的好处是,模板的职责和作用更加清晰。
下面是一个可运行的代码和框,如果你想玩这个:https://codesandbox.io/s/octane-starter-ftt8s

rsaldnfx

rsaldnfx5#

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

MyEmberApp.PostsIndexView = Ember.View.extend({

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

});

相关问题