meteor - 从集合创建数组时如何保留数据 "reactive"

Question

我正在整合 fullCalendar在我的 meteor 应用程序中。 fullCalendar 需要一个特定的 data format .我可以从我的收藏中创建该数据。然而，数据不再是 react 性的。

有什么方法可以使从我的集合转换为数组的数据“响应式(Reactive)”？

谢谢。

客户端 html:

<template name="carpool_calendar">
  <div id="calendar"></div>
</template>

客户端JS:

Template.carpool_calendar.rendered = function () {  
  //initialize the calendar in this template
  $('#calendar').fullCalendar({    
    events: function(start, end, callback) {
      var events = [];      
      var calendarEvents = Carpool_Events.find();

      calendarEvents.forEach(function (carpool_event) {
    events.push({
          title: carpool_event.owner,
          start: carpool_event.eventDate
    });
    console.log("Event owner " + ": " + carpool_event.owner);
      });
      callback(events);
    },
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,basicWeek,basicDay'
    }, 
    weekends: false, // will hide Saturdays and Sundays
    editable: true
  });
};

更新了客户端 JS(这还不是很正确。它会在每次数据更改时重新创建日历...随着新日历实例的出现，页面变得越来越长):

Template.carpool_calendar.rendered = function () {  
  Meteor.autorun(function() {
    //initialize the calendar in this template
    $('#calendar').fullCalendar({    
      events: function(start, end, callback) {
    var events = [];      
    var calendarEvents = Carpool_Events.find();

    calendarEvents.forEach(function (carpool_event) {
      events.push({
            title: carpool_event.owner,
            start: carpool_event.eventDate
      });
      console.log("Event owner " + ": " + carpool_event.owner);
    });
    callback(events);
      },
      header: {
    left: 'prev,next today',
    center: 'title',
    right: 'month,basicWeek,basicDay'
      }, 
      weekends: false, // will hide Saturdays and Sundays
      editable: true
    });
  })};

客户端 JS 完全工作的“响应式(Reactive)”全日历:

Template.carpool_calendar.rendered = function () {  
  //initialize the calendar in this template
  $('#calendar').fullCalendar({    
    events: function(start, end, callback) {
      var events = [];      
      var calendarEvents = Carpool_Events.find();

      calendarEvents.forEach(function (carpool_event) {
    events.push({
          title: carpool_event.owner,
          start: carpool_event.eventDate
    });
    console.log("Event owner " + ": " + carpool_event.owner);
      });
      callback(events);
    },
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,basicWeek,basicDay'
    }, 
    weekends: false, // will hide Saturdays and Sundays
    editable: true
  });

  Meteor.autorun(function() {
    var calendarEvents = Carpool_Events.find();
    $('#calendar').fullCalendar('refetchEvents');
  });

};

Answer 1

就像 TimDog 说的，你不能给 UI 元素一个 react 数组，让它来处理剩下的事情。但另一种选择是您可以使用 Meteor.autorun，这样当您的集合发生变化时，它可以触发一个 JS 函数来更新数组，从而使其具有一定的 react 性。

我不确定如何准确使用此日历，但将其添加到您的客户端代码中可能会有所帮助。

Meteor.autorun(function() {
    calendarEvents = Carpool_Events.find();

    $('#calendar').fullCalendar({    
        events: function(start, end, callback) {
            var events = [];      

            calendarEvents.forEach(function (carpool_event) {
                events.push({
                title: carpool_event.owner,
                start: carpool_event.eventDate
            });
       });
      callback(events);
    }
  });
});