![](/img/trans.png)
[英]Right way for conditional transition depending on where view is rendered in emberjs
[英]EmberJS view being rendered twice
新的embers并试图找出最佳实践。 当我切换到日历模板时,问题是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}}
不要在视图上使用didInsertElement挂钩,而是尝试将以下内容放在CalendarRoute上:
model: function(){
Ember.run.scheduleOnce('afterRender', this, function(){
$('#calendar').fullCalendar();
});
}
这是一个更惯用的解决方案。 当您使用插件时,您希望手动从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;
这个问题实际上最终成了一个重复,并且是一个完整的日历事物与一个灰烬事物相关联。 对我有用的是添加jquery-once插件并像这样调用它
$('#calendar').once('calendar').fullCalendar();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.