CODEWITHSUNDEEP
ember.jstwitter-bootstrap-3
Siva
Siva

Reputation: 2795

Bootstrap components (model, tab, dropdown) are not working when switching the routes in EmberJs

Bootstrap components (model, tab, dropdown) are not working when switching the routes in EmberJs

I have two {{outlet}} in my application.hbs, one for login and other for all other pages.

{{#if isLoggedIn}}
    <div class="main">{{outlet}}<div>
{{else}}
    <div class="login">{{outlet}}</div>
{{/if}}

Initially the bootstrap components are working fine, If i transition to login and come back to other routes then the components in other routes are not working.

The tabs worked before are not clickable. The dropdown menu are not clickable. The model is not showing up on clicking on button.

If i use same outlet for both routes then it works fine.

Upvotes: 0

Views: 143

Answers (1)

Timm
Timm

Reputation: 1015

On a transition change, ember drastically modifies the DOM. This means on every change in DOM structure you have to reinitialize your bootstrap components.

To solve this issue you got two options.

  1. Implement your own components and call specific bootstrap initialization methods on didInsertElement hook.
  2. Use an existing ember addon like ember-bootstrap that provides all bootstrap components as ember components.

I would stick to way 2.

Upvotes: 1

Related Questions