javascript - 在渲染所有 DOM 元素后， Controller 或路由器中是否有一个钩子(Hook)被调用？

Question

假设我想做一些 jQuery 的事情

// Do jQuery Stuff
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

我想将此代码包含在路由或 Controller 中，我很确定我无法实现它，因为没有钩子(Hook)函数(即 model()、renderTemplate() 等) 我可以使用它来保证 DOM 中的所有元素都已安全呈现。

现在，如果我在组件中执行此操作，我知道我可以调用 didInsertElement Hook ，这将允许我运行上面的代码。

我的用例

我想使用一个名为 ScrollMagic 的库，它需要 jQuery 进行配置。除了我之外，其他人已经在路由和 Controller 中编写了很多代码。我们可以轻松地将其移动到一个组件(我们可能会)，但出于我自己的好奇心，我仍然想问这个。

问题

路由或模型中是否有任何钩子(Hook)可以保证该模板的所有元素都已在 DOM 中呈现？如果不是，那是为什么呢？毕竟，您可以在组件中使用该 Hook 。

Answer 1

路由和 Controller 没有任何渲染后 Hook

• https://www.emberjs.com/api/ember/release/classes/Controller
• https://www.emberjs.com/api/ember/release/classes/Route

通常，您想要完成 afterRender 事情的方式是使用自定义元素修饰符(新):https://github.com/emberjs/ember-render-modifiers(或将操作绑定(bind)到 did-insert)

或者，您可以创建一个仅定义了 didInserElement Hook 的无渲染组件。

因此，在您的模板中:

<BindButtonsToHideParagraphs />

然后在该组件内:

export default class BindButtonsToHideParagraphs extends Component {
  didInsertElement() {
    document).ready(function(){
      $("button").click(function(){
        $("p").hide();
      });
  }
}

不过，根据您提供的 jQuery，我强烈建议您在按钮上使用正常操作，并使用条件 if/elses 来显示/隐藏 p 标记。

看起来像这样:

<button {{action 'toggleParagraph'}}>click me</button>

{{#if this.showParagraph}}
  <p>text</p>
{{/if}}

export default class SomeComponent extends Component {
  @action
  toggleParagraph() {
    this.set('showParagraph', !this.showParagraph);
  }
}

或者，如果您使用 Sparkles 组件:https://github.com/rwjblue/sparkles-component

<button {{action this.toggleParagraph}}>click me</button>

{{#if this.showParagraph}}
  <p>text</p>
{{/if}}

export default class SomeComponent extends Component {
  @tracked showParagraph = true;

  toggleParagraph() {
    this.showParagraph = !this.showParagraph;
  }
}