流星更新jQuery插件数据

Question

我使用旨在为日记供电的大火模板具有流星应用程序，显示部分由jQuery fullcalendar处理。我将FullCalendar传递给用于显示的事件的回调，这运行良好。不过，我无法以反应性的方式表现出来 - 日记将同时在多个设备上使用，我希望该事件立即在所有设备上更新。我能够更新集合，我可以看到将更改推到了Minimongo订阅中，但是我无法更新日历。我是否可以将一个事件连接到可以强迫日历来撤离事件的地方？似乎这应该是一个相当普遍的用例吗？

当前代码如下：

日记：

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");仅被调用一次，每当预订更改时，我都需要称呼我。

日记。

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

实际的FullCalendar显示屏位于其自己的组件中，该组件来自包装在大气上的一个组件 - 我很可能会非常大量自定义，并且也希望控制插件版本，因此不直接使用。此组件如下：

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内有一个反应性数据源，以确保数据更改时其执行。在这种情况下，我们实际上不需要在autorun中获取数据，因为您使用的是FullCalendar事件回调。因此，Bookings.find().fetch()只是确保每次收集更改refetchEvents。

请查看本教程，以防您需要一些其他帮助。