3

我正在将fullCalendar集成到我的流星应用程序中。fullCalendar 需要特定的数据格式。我可以从我的收藏中创建该数据。然而，数据不再是被动的。

有什么方法可以使我从 Collection 转换为 Array 的数据“反应”？

谢谢。

客户端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 完全工作的“反应式”全日历：

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

};
4

2 回答 2

5

就像 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);
    }
  });
});
于 2013-02-11T07:22:50.710 回答
2

这是关于如何为 Meteor 正确创建 UI 组件以确保响应式数据上下文的更大问题的一部分。这是一个很好的问题，而且之前有人问过。

简短的回答是目前还没有标准化的框架——比如 Meteor.UI 智能包。然而，在此期间，最好的办法是使用 {{#each}} 帮助源作为指导来破解 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);
        });
  },
于 2013-02-11T04:58:58.503 回答