0

当使用流星火焰更改数据时，我仍在努力获得重新渲染的日历。我已经放置了一个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 放在其他地方吗？如果是在哪里？

4

2 回答 2

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
})
于 2014-05-05T20:27:02.563 回答
0

当事情发生变化时，使用内部日历功能重新渲染日历：

Deps.autorun(function () {
    if (Session.equals('calendarTemplateRendered', false) ||
        !calendarSubs.ready() ||
        typeof Calendar === 'undefined') {
        console.log('exiting because there is no objects to process');
        return;
    }

    console.log('trying to autorun');
    var entries = Calendar.find().fetch(),
       $calendar = $('#calendar');
    $calendar.fullCalendar('removeEvents');
    $calendar.fullCalendar('addEventSource', entries);
    $calendar.fullCalendar('rerenderEvents');
}

Blaze 会为您完成剩下的工作。不知道这有多有效，但对我来说效果很好。现在您只需操作订阅“日历”“插入、删除等”，日历就会正常工作。

于 2014-06-01T05:48:36.157 回答