当流星中的数据更改时,使引导日历呈现 [英] Making bootstrap calendar render when data change in meteor
问题描述
当使用流星火焰更改数据时,我仍在努力重新获得日历.我已经放置了一个observerChanges函数,该函数在添加,删除或更改触发器时会很高兴地触发,但是我不知道如何实际使日历更新其状态.
I'm still struggling to get a calendar to re-render when data changes using meteor blaze. I have put in place an observerChanges function that is firing happily when added, removed or changed are triggered, but I have NO idea how to actually make the calendar update its state.
处理程序代码为
Meteor.subscribe("reqEvents");
Meteor.subscribe("reqEvents");
allReqsCursor = Requests.find();
allReqsCursor = Requests.find();
var handle = allReqsCursor.observeChanges({
added: function (id, user) {
console.log("Request added");
},
removed: function () {
console.log("Request removed");
},
changed: function() {
console.log("Request changed");
// $('#calendar').fullCalendar().today();
}
});
render函数本身是
And the render function itself is
Template.packLayout.rendered = function(){
$('#calendar').fullCalendar({
//dayClick:function( date, allDay, jsEvent, view ) {
// Requests.insert({title:'Request',start:date,end:date,color:'red',className:'todo'});
// Session.set('lastMod',new Date());
//},
eventClick:function(reqEvent,jsEvent,view){
Session.set('editingReqEvent',reqEvent.id);
Session.set('showEditEvent',true);
},
eventDrop:function(reqEvent){
Requests.update(reqEvent.id, {$set: {start:reqEvent.start,end:reqEvent.end}});
Session.set('lastMod',new Date());
},
events: function(start, end, callback) {
var events = [];
reqEvents = Requests.find();
reqEvents.forEach(function(evt){
event = {id:evt._id,title:evt.title,start:evt.start,end:evt.end,color:evt.color};
events.push(event);
})
callback(events);
},
editable:true,
weekMode: 'liquid',
});
};
如何将它们钩在一起?我已经尝试了几件事(根据注释掉的代码),但是它要么崩溃要么渲染日历两次.
How do I hook these together? I've tried a few things (as per the commented out code) but it either blows up or renders the calendar twice.
这是最好的方法吗?我应该把deps.autorun放在其他地方吗?如果是这样的话?
Is this even the best way? Should I put a deps.autorun in somewhere else?? If so where?
推荐答案
FullCalendar只能在Template.packLayout.rendered函数中实例化一次. 我建议获取fullCalendar实例的参考:
FullCalendar should be instantiated only once in Template.packLayout.rendered function. I recommend to get reference of fullCalendar instance :
var calendar = null
Template.packLayout.rendered = function(){
// only once !
calendar = $('#calendar').fullCalendar({...});
}
Template.packLayout.helpers ({
data:function(){
allReqsCursor = Requests.find();
var handle = allReqsCursor.observeChanges({
added: function (id, user) {
console.log("Request added");
},
removed: function () {
console.log("Request removed");
},
changed: function() {
console.log("Request changed");
if(calendar){
calendar.today();
}
}
});
return allReqsCursor;
}
})
每次更新Requests集合时,都会重新运行
Template.packLayout.helpers.data. 上面的代码之类的东西应该会对您有所帮助.
Template.packLayout.helpers.data is being rerun every time Requests collection is updated. Something like above code should help you.
代替使用Template.packLayout.helpers.data函数,您可以使用:
Instead using Template.packLayout.helpers.data function you can use:
Deps.autorun(function(){
allReqsCursor = Requests.find();
// update calendar
})
这篇关于当流星中的数据更改时,使引导日历呈现的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!