在将Ember View插入DOM后,如何运行函数?以下是我的使用案例:我想使用jQuery UI sortable来允许排序。
ecfsfe2w1#
您需要覆盖didInsertElement,因为它是“当视图的元素被插入到DOM中时调用。覆盖此函数以执行任何需要文档正文中的元素的设置。”在didInsertElement回调中,可以使用this.$()为视图的元素获取一个jQuery对象。参考:https://github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/views/view.js
didInsertElement
this.$()
cwdobuhd2#
您也可以使用afterRender方法
didInsertElement: function () { Ember.run.scheduleOnce('afterRender', this, function () { //Put your code here what you want to do after render of a view }); }
zzlelutf3#
Ember 2.x:视图已弃用,请改用组件
您必须了解组件的生命周期,才能知道某些事情何时发生。随着组件的呈现、重新呈现和最终删除,Ember提供了生命周期钩子,允许您在组件生命周期的特定时间运行代码。https://guides.emberjs.com/v2.6.0/components/the-component-lifecycle/一般来说,didInsertElement是与第三方库集成的理想场所。这个钩子保证了两件事,1.组件的元素已创建并插入DOM。1.可通过组件的$()方法访问组件的元素。
$()
在中,您需要在属性变更时执行JavaScript
在didRender挂钩内运行代码。
didRender
请再次阅读上述生命周期文档以了解详细信息
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
rsaldnfx5#
您需要在视图的didInsertElement回调中激发任何想要的内容:
MyEmberApp.PostsIndexView = Ember.View.extend({ didInsertElement: function(){ // 'this' refers to the view's template element. this.$('table.has-datatable').DataTable(); } });
5条答案
按热度按时间ecfsfe2w1#
您需要覆盖
didInsertElement
,因为它是“当视图的元素被插入到DOM中时调用。覆盖此函数以执行任何需要文档正文中的元素的设置。”在
didInsertElement
回调中,可以使用this.$()
为视图的元素获取一个jQuery对象。参考:https://github.com/emberjs/ember.js/blob/master/packages/ember-views/lib/views/view.js
cwdobuhd2#
您也可以使用afterRender方法
zzlelutf3#
Ember 2.x:视图已弃用,请改用组件
您必须了解组件的生命周期,才能知道某些事情何时发生。
随着组件的呈现、重新呈现和最终删除,Ember提供了生命周期钩子,允许您在组件生命周期的特定时间运行代码。
https://guides.emberjs.com/v2.6.0/components/the-component-lifecycle/
一般来说,
didInsertElement
是与第三方库集成的理想场所。这个钩子保证了两件事,
1.组件的元素已创建并插入DOM。
1.可通过组件的
$()
方法访问组件的元素。在中,您需要在属性变更时执行JavaScript
在
didRender
挂钩内运行代码。请再次阅读上述生命周期文档以了解详细信息
rm5edbpk4#
从Ember 3.13开始,您可以使用继承自Glimmer的组件,下面的示例显示了它的外观:
这些视图样式组件没有直接的生命周期钩子,相反,你可以使用render-modifiers来附加一个函数。
这样做的好处是,模板的职责和作用更加清晰。
下面是一个可运行的代码和框,如果你想玩这个:https://codesandbox.io/s/octane-starter-ftt8s
rsaldnfx5#
您需要在视图的
didInsertElement
回调中激发任何想要的内容: