3

fullCalendarを流星アプリケーションに統合しています。fullCalendar は、特定のデータ形式を想定しています。コレクションからそのデータを作成できます。ただし、データはもはや反応的ではありません。

コレクションから配列に変換したデータを「リアクティブ」にする方法は何ですか?

ありがとう。

クライアント 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 に答える