Reputation: 2975
Let's say I want to do some jQuery stuff
// Do jQuery Stuff
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
And I want to include this code in either the route or the controller, I'm quite sure I cannot implement this because there's no hook function (I.E. model(), renderTemplate(), etc.
that I can use that guarantees that all the elements in the DOM have safely been rendered.
Now, if I were doing this in a component, I know I could call the didInsertElement
hook and that could would allow me to run the code above.
My Use Case
I want to use a library called ScrollMagic which would require jQuery to configure. Someone other than me has already written a lot of code in the route and controller. We could easily just move this to a component (and we probably will), but I still wanted to ask this for my own curiosity.
Question
Is there any hook in either the route or the model that guarantees all the elements of that template have been rendered in the DOM? If not, why is that? After all, you have that hook available in a component.
Upvotes: 0
Views: 45
Reputation: 65183
The route and controller don't have any after render hooks
Generally the way you'd want to accomplish an afterRender
thing, is to either use a custom element-modifier (new): https://github.com/emberjs/ember-render-modifiers
(or bind an action to did-insert
)
Or, you can make a renderless component that just has a didInserElement hook defined.
So, in your template:
<BindButtonsToHideParagraphs />
and then inside that component:
export default class BindButtonsToHideParagraphs extends Component {
didInsertElement() {
document).ready(function(){
$("button").click(function(){
$("p").hide();
});
}
}
though, based on the jQuery you've provided, I highly recommend you use normal actions on the button, and conditional if/elses to show/hide the p
tags.
that would look something like this:
<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);
}
}
or, if you are using the sparkles components: 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;
}
}
Upvotes: 2