Is There Any Hook That Runs After The Dom Settles

@tundebabzy wrote:

I’m learning Ember JS with Foundation CSS framework but I’m having a little problem with instantiating a plugin.

I’m instantiating the javascript plugin in application.hbs like this:

...
{{outlet}}
<script>
  $(document).foundation();
</script>

I also have a component:

<div class="sticky" data-sticky data-anchor="content">
  <ul class="vertical tabs module-side-panel__list" id="module-side-panel__list" data-tabs>
    {{#each boot.modules key='type' as |module index|}}
      <li class="module-side-panel__list-item tabs-title {{if index '' 'is-active'}}">
        <a href="#{{module.module_name}}" aria-selected="{{if index '' 'true'}}">{{module.module_name}}</a>
      </li>
    {{/each}}
  </ul>
</div>

The problem is that by the time the plugin is instantiated and run, each helper has not added the li tags to the DOM causing the plugin to misbehave.

After a lot of research into the docs, I settled for the didRender hook to instantiate the plugin. I noticed didRender runs multiple times for the same component so I added code to prevent multiple instantiation. My question is, is there a better way?

Posts: 1

Participants: 1

Read full topic