ember.js - EmberJS view being rendered twice -

new ember , trying figure out best practices. issue fullcalendar rendering 2 calendars when switch calendar template.

here console output:

attempting transition calendar ember.js?body=1:3499 transition #3: calendar: calling beforemodel hook ember.js?body=1:3499 transition #3: calendar: calling deserialize hook ember.js?body=1:3499 transition #3: calendar: calling aftermodel hook ember.js?body=1:3499 transition #3: resolved models on destination route; finalizing transition. ember.js?         body=1:3499 rendering calendar <app@view:calendar::ember635> object {fullname: "view:calendar"}         ember.js?body=1:3499 transitioned 'calendar' ember.js?body=1:3499 transition #3: transition complete.  

here code:

router.es6

var router = ember.router.extend({   location: 'history' });  router.map(function() {   //...   this.route('calendar');   //... });  export default router;  

routes/calendar.es6

export default ember.route.extend(); 

views/calendar.es6

var calendarview = ember.view.extend({   didinsertelement: function() {     $('#calendar').fullcalendar();   } });  export default calendarview; 

templates/calendar.hbs

{{#view "calendar"}}   <nav>     <h1>schedule</h1>   </nav>   <article id="schedule">     <section>       <div id='calendar'></div>     </section>   </article> {{/view}} 

instead of using didinsertelement hook on view, try putting following on calendarroute:

model: function(){     ember.run.scheduleonce('afterrender', this, function(){         $('#calendar').fullcalendar();     }); }