如何保持数据“反应性"从集合创建数组时 [英] How to keep data "reactive" when creating an array from a Collection

问题描述

我正在我的流星应用程序中集成 fullCalendar.fullCalendar 需要特定的数据格式.我可以从我的收藏中创建这些数据.然而，数据不再是反应性的.

I am integrating fullCalendar in my meteor application. fullCalendar expects a specific data format. I can create that data from my Collection. However the data is no longer reactive.

有什么方法可以使我从集合转换为数组的数据反应式"?

What is a way I can make the data I translated from my Collection to an Array "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(这还不完全正确.它在每次数据更改时重新创建日历...页面随着新的日历实例变得越来越长):

Updated Client JS (This is not quite right yet. Its recreating the calendar on every data change...the page gets longer and longer with new calendar instances):

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 完全工作的反应式"全日历:

Client JS Fully working "reactive" 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');
  });

};

推荐答案

就像 TimDog 所说的，你不能给 UI 元素一个反应式数组，让它来处理其余的事情.但是另一个选择是你可以使用 Meteor.autorun 这样当你的集合发生变化时，它可以触发一个 JS 函数来创建一个更新的数组，从而使它有点反应性.

Like TimDog said, you can't give the UI element a reactive array, and let it take care of the rest. But another option is you could use Meteor.autorun so when your collection changes, it can trigger a JS function to make an updated array, thereby making it somewhat reactive.

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

I'm not sure how to use this calendar exactly, but adding this into your client side code might help.

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

这篇关于如何保持数据“反应性"从集合创建数组时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！