0

残り火が初めてで、ベストプラクティスを理解しようとしています。問題は、カレンダー テンプレートに切り替えると、fullCalendar が 2 つのカレンダーをレンダリングすることです。

コンソール出力は次のとおりです。

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;

routes/calendar.es6

export default Ember.Route.extend();

ビュー/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}}
4

3 に答える 3

1

これは、より慣用的な解決策です。プラグインを使用している場合、イベント リスナーを 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;
于 2014-03-24T20:33:52.273 に答える
1

ビューで didInsertElement フックを使用する代わりに、CalendarRoute に以下を追加してみてください。

model: function(){
    Ember.run.scheduleOnce('afterRender', this, function(){
        $('#calendar').fullCalendar();
    });
}
于 2014-03-24T17:37:48.373 に答える