Question

假设我想做一些jQuery的事情

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

我想将此代码包含在路由或控制器中，我很确定我无法实现，因为没有钩子函数（我可以使用的IE 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显示/隐藏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;
  }
}

在渲染完所有DOM元素之后，控制器或路由器中是否有要调用的钩子？

1 个答案: