从集合创建数组时如何保持数据“反应性”

Question

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

有什么方法可以使我从我的 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');
  });

};

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