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

不要在视图上使用didInsertElement钩子，而是尝试在CalendarRoute上添加以下内容:

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

Answer 2

这里有一个更习惯的解决方案。当你使用插件时，你需要手动将它们的事件监听器从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;

Answer 3

这个问题实际上是一个重复，是一个fullCalendar的事情，而不是一个ember的事情。对我有用的是添加jquery-once插件并像这样调用它

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

SO参考:Fullcalendar:为什么日历在页面上出现两次?