Question

我正在将fullCalendar集成到我的流星应用程序中。 fullCalendar需要特定的data format。我可以从我的Collection中创建数据。但是数据不再具有反应性。

我可以通过什么方式将从我的Collection转换为数组的数据“反应”？

感谢。

客户端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完全正常工作“被动”fullcalendar：

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元素一个反应数组，让它照顾其余的。但另一个选择是你可以使用Meteor.autorun所以当你的集合发生变化时，它可以触发一个JS函数来创建一个更新的数组，从而使它有点反应。

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

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

Answer 2

这是关于如何为Meteor正确创建UI组件以确保反应式数据上下文的更大问题的一部分。这是一个非常好的问题one that's been asked before。

简短的回答是，还没有标准化的框架 - 就像Meteor.UI智能包一样。但是，在此期间，最好的办法是使用{{#each}}助手source作为指导来破解fullCalendar小部件。您需要注意数据元素如何使用Spark标记：

 'each': function (data, options) {
    var parentData = this;
    if (data && data.length > 0)
      return _.map(data, function(x, i) {
        // infer a branch key from the data
        var branch = (x._id || (typeof x === 'string' ? x : null) ||
                      Spark.UNIQUE_LABEL);
        return Spark.labelBranch(branch, function() {
          return options.fn(x);
        });
      }).join('');
    else
      return Spark.labelBranch(
        'else',
        function () {
          return options.inverse(parentData);
        });
  },

如何在从Collection创建数组时保持数据“被动”

2 个答案: