在呈现所有 DOM 元素后，控制器或路由器中是否有一个挂钩被调用？

Question

假设我想做一些 jQuery 事情

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

我想在路由或控制器中包含这段代码，我很确定我无法实现它，因为没有挂钩函数（即我可以使用的 model(), renderTemplate(), etc. 保证所有DOM 中的元素已安全呈现。

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

我的用例

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

问题

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

Answer 1

路由和控制器没有任何后渲染挂钩

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

或者，您可以制作一个只定义了 didInserElement 挂钩的无渲染组件。

因此，在您的模板中：

<BindButtonsToHideParagraphs />

然后在该组件内：

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

不过，根据您提供的 jQuery，我强烈建议您在按钮上使用正常操作，并且有条件地 if/elses 到 show/hide 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);
  }
}

或者，如果您使用的是闪光组件：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;
  }
}

在呈现所有 DOM 元素后，控制器或路由器中是否有一个挂钩被调用？

Is there a hook in either the controller or router to be called after all DOM elements have been rendered?

javascript

ember.js