正在渲染EmberJS視圖兩次

Question

新入門並試圖找出最佳實踐。問題是，當我切換到日曆模板時，fullCalendar呈現兩個日曆。

這裏是控制檯輸出：

Attempting transition to 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 all models on destination route; finalizing transition. ember.js?   body=1:3499 
Rendering calendar with <app@view:calendar::ember635> Object {fullName: "view:calendar"}   ember.js?body=1:3499 
Transitioned into 'calendar' ember.js?body=1:3499 
Transition #3: TRANSITION COMPLETE. 

這裏是我的代碼：

router.es6

var Router = Ember.Router.extend({ 
    location: 'history' 
}); 

Router.map(function() { 
    //... 
    this.route('calendar'); 
    //... 
}); 

export default Router; 

路線/ calendar.es6

export default Ember.Route.extend(); 

組

的意見/ calendar.es6

var CalendarView = Ember.View.extend({ 
    didInsertElement: function() { 
    $('#calendar').fullCalendar(); 
    } 
}); 

export default CalendarView; 

模板/ calendar.hbs

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

Answer 1

這個問題實際上最終成爲一個重複，並且是一個fullCalendar事物與一個餘燼事物相對應。什麼工作對我來說是增加了jQuery一次插件並調用它像這樣

$('#calendar').once('calendar').fullCalendar(); 

SO參考：Fullcalendar: why is the calendar appearing twice on the page?

Answer 2

而不是使用didInsertElement鉤上的看法，嘗試把你的CalendarRoute如下：

model: function(){ 
    Ember.run.scheduleOnce('afterRender', this, function(){ 
     $('#calendar').fullCalendar(); 
    }); 
} 

Answer 3

這裏是更多慣用的解決方案。當您使用插件時，您需要手動從DOM中分離它們的事件偵聽器，否則您將創建內存泄漏。

var CalendarView = Ember.View.extend({ 

    renderCalendar: function() { 
    var self = this; 
    Ember.run.schedule('afterRender', function() { 
     self.calendar = $('#calendar').fullCalendar(); 
    }); 
    }.on('didInsertElement'), 

    removeCalendar: function() { 
    // Detach any calendar events 
    this.calendar = null; 
    delete this.calendar; 
    }.on('willDestroyElement') 

}); 

export default CalendarView;