Ember 仅在初始渲染时调用 jQuery 代码答案

【问题标题】：Ember invoke jQuery code only on initial renderEmber 仅在初始渲染时调用 jQuery 代码
【发布时间】：2020-07-09 08:20:45
【问题描述】：

在我的 Ember 组件类中，我想运行一些 jQuery 代码来隐藏一些元素。但是，我希望此代码仅在初始渲染时运行，而不是在其他事件（例如网格刷新）上运行

hidePositionElements: function() {
    var self = this;
    var currPosLabelElements = $( ".my-grid-footer-value");
    currPosLabelElements.hide();
},

我尝试添加到“didRender”，但运行多次。

也尝试从“didInsertElement”钩子中调用上述函数，但 jQuery 在那个阶段无法找到元素。

【问题讨论】：

didInsertElement 应该可以工作。如果没有其他问题。或者在较新的 ember 版本中使用 did-insert 修饰符。
一个ember-twiddle.com repro 会很好调试

标签： javascript jquery ember.js

【解决方案1】：

如果在didInsertElement()上找不到元素，那么你可以尝试在短暂延迟后运行jQuery代码，例如

import Component from '@glimmer/component'
import { later } from '@ember/runloop';

export default class MyComponent extends Component {
    didInsertElement() {
        later(function () {
            $( ".my-grid-footer-value").hide();
        });
    }
}

这里的later() 类似于setTimeout()，但它在Ember runloop 中运行。并且由于没有指定延迟，因此应该尽快运行（希望您的网格页脚元素在它执行时已经存在）。

作为一般规则，每当您进行任何 DOM 操作时，您都应该将其包装在一个 runloop 方法（通常是run()）中，以便 Ember 可以安排代码在正确的时间运行。

但是，作为 Ember 的最佳实践您应该尽量避免自己修改 DOM，而是让 Ember 处理它（使用类似 {{#if this.showPositionElements}} ... {{/if}} 的东西，然后切换 showPositionElements）。

【讨论】：