Question

我有一个使用Blaze模板的Meteor应用程序，旨在为日记提供动力，显示部分由JQuery FullCalendar处理。我正在通过fullcalendar回调用于显示事件，这很好用。我不能让它以反应的方式表现 - 日记将同时在几个设备上使用，我希望立即在所有设备上更新事件。我能够更新集合，我可以看到更改被推送到minimongo订阅但是我无法让日历更新。是否有一个事件可以挂钩我可以强制日历重新获取事件？看来这应该是一个相当常见的用例？

目前的代码如下：

Diary.js：

Template.Diary.onCreated(function() {
    this.autorun(() => {
        this.subscribe('bookings');
    });
});

Template.Diary.helpers({
    dataReady : function() {
      return Template.instance().subscriptionsReady();
    },
    events: function () {
        const instance = Template.instance();
        var fc = $('.fc');
        return function (start, end, tz, callback) {
                //console.log(instance.data.bookings);
                //find all, because we've already subscribed to a specific range
                var events = Bookings.find().map(function (bk) {
                    return {
                        title: bk.serviceName,
                        start: bk.bookingDate,
                        editable: bk.bookingDate > new Date(),
                        allDay: false
                    };
                });
                console.log(events);
                callback(events);
        };
    },
    onEventClicked: function() {
        return function(calEvent, jsEvent, view) {
            alert("Event clicked: "+calEvent.title);
        }
    }
});

Template.Diary.rendered = function () {
    const instance = Template.instance();
    var fc = this.$('.fc');

    this.autorun(function () {
        console.log("refetching events");
        fc.fullCalendar('refetchEvents');
    });
};

代码console.log("refetching events");只被调用过一次，我需要在预订订阅发生变化时调用它。

Diary.html（已删除其他标记）：

{{#if dataReady}}
    {{> fullcalendar
            class="fc"
            defaultView='agendaWeek'
            height="100%"
            events=events
            eventClick=onEventClicked
    }}
{{else}}
    <div class="calendar_loading">Loading...</div>
{{/if}}

实际的FullCalendar显示在它自己的组件中，该组件基于Atmosphere上打包的组件 - 我可能会对此进行大量定制，并且还希望控制插件版本，因此不能直接使用。该组件如下：

fullcalendar.js：

Template.fullcalendar.rendered = function() {
    var div = this.$(this.firstNode);
    if(this.data != null) {
        div.attr('id', this.data.id);
        div.addClass(this.data.class);
    }
    div.fullCalendar(this.data);
};

fullcalendar.html

<template name="fullcalendar">
    <div class="fc"></div>
</template>

Answer 1

我认为更改onRendered方法应该可以解决问题。

Template.Diary.onRendered = function () {
  var self = this;

  this.autorun(function () {
      Bookings.find().fetch();
      var fc = self.$('.fc');
      fc.fullCalendar('refetchEvents');
  });
};

您必须在autorun内部拥有一个被动数据源，以确保在数据发生变化时执行该数据源。在这种情况下，由于您使用的是FullCalendar事件回调，因此我们实际上并不需要在autorun内获取数据。因此Bookings.find().fetch()只会确保每次收集更改refetchEvents时都会运行。

如果您需要其他帮助，请查看此tutorial。

Meteor更新JQuery插件数据

1 个答案: