javascript - 当 meteor 中的数据发生变化时，使引导日历呈现

Question

当数据发生变化时，我仍然在努力使用 meteor 闪耀来重新渲染日历。我已经设置了一个observerChanges函数，当触发添加、删除或更改时，该函数会愉快地触发，但我不知道如何实际使日历更新其状态。

处理程序代码是

Meteor.subscribe("reqEvents");

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();
  }
});

渲染函数本身是

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',
  });
};

如何将它们连接在一起？我已经尝试了一些方法(根据注释掉的代码)，但它要么爆炸，要么渲染日历两次。

这是最好的方法吗？我应该把 deps.autorun 放在其他地方吗？如果有的话在哪里？

Answer 1

FullCalendar 只能在 Template.packLayout.rendered 函数中实例化一次。我建议获取 fullCalendar 实例的引用:

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;
  }
})

每次更新请求集合时，Template.packLayout.helpers.data 都会重新运行。像上面的代码应该对你有帮助。

您可以使用 Template.packLayout.helpers.data 函数来代替:

Deps.autorun(function(){
    allReqsCursor = Requests.find();
    // update calendar
})