当流星中的数据更改时，使引导日历呈现 [英] 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屋！