Blaze模板帮助器仅在空间栏中返回Meteor / Mongo中的每个循环

时间:2017-07-03 23:52:06

标签: javascript meteor meteor-blaze spacebars

我有一个帮助器,它应该找到对应于给定月份和年份参数的所有事件,并将它们作为数组返回,以便模板循环。看来我的帮助器只返回一年的第一个实例,而不是循环,我不明白为什么。

这是模板:

  <template name="list">
  <ul id="ulShell">
    {{#each year in getYears}}
      <li class="liYear">
        <h2>{{year}}</h2>
      </li>
      <ul class="ulSubShell">
        {{#each month in (getMonths year)}}
          <li class="liMonth">
            <h3>{{month}}</h3>
          </li>
          <ul>
            {{#each event in (getEvents month year)}}
              <li>
                <h4>{{dayOfWeek event.start}} – {{formatDate event.start}}</h4>
                <div class="divEvent">{{event.title}} <span class="spanDep pull-right">{{event.department}}</span></div>
              </li>
            {{/each}}
          </ul>
        {{/each}}
      </ul>
    {{/each}}
  </ul>
  </template>

这是逻辑:

  let monthNames = ["January", "February", "March", "April", "May", "June",
    "July", "August", "September", "October", "November", "December"
  ];

  let today = new Date();
  //today.setDate(today.getDate());

  let upcoming = {
    start: {
      $gt: today.toISOString()
    }
  }

  let findYears = function(){
    var selectedDep = Session.get('selectedDep');
    var distinctYears = _.uniq(Events.find( { $and: [ upcoming, selectedDep ] }, {
      sort: {start: 1}, fields: {start: true}
    }).fetch().map(function(x) {
      var d = Number(x.start.substring(0, 4));
      return d;
    }), true);
    return distinctYears;
  };

  let findMonths = function(year){
    var selectedDep = Session.get('selectedDep');
    var query = {
      start: {
        $gt: new Date(year - 1, 11, 31, 21, 59, 59, 999).toISOString(),
        $lt: new Date(year + 1, 0, 0, 22, 00, 00, 001).toISOString()
      }
    }
    var distinctMonths = _.uniq(Events.find( { $and: [ upcoming, query, selectedDep ] }, {
      sort: {start: 1}, fields: {start: true}
    }).fetch().map(function(x) {
        var d = Number(x.start.substring(5, 7));
        return monthNames[d];    
    }), true);
    return distinctMonths;
  };

  ///////////  I think this is where the problem is. Maybe with the forEach() function?
  let findEvents = function(month, year){
    var selectedDep = Session.get('selectedDep');
    var events = Events.find( { $and: [ upcoming, selectedDep ] }, {sort: {start: 1}}).fetch();
    var finalEvents = new Array();
    events.forEach(function(event){
      var mDigits = monthNames.indexOf(month);
      mDigits += 1
      mDigits = mDigits.toString();
      var yearMonthSlice;
      if(mDigits.length === 1){
        yearMonthSlice = year+"-"+"0"+mDigits;
      }else if(mDigits.length === 2){
        yearMonthSlice = year+"-"+mDigits;
      }
      var getStart = event.start.substring(0, 7);
      if(yearMonthSlice === getStart){
        finalEvents.push(event);
      }
    });
    return finalEvents;
  };

  Template.list.onCreated( () => {
    let template = Template.instance();
    template.subscribe( 'events' );
  });

  Template.list.helpers({
    getYears() {
      foundYears = findYears();
      return foundYears;
    },
    getMonths(year) {
      foundMonthNames = findMonths(year);
      return foundMonthNames;
    },
    getEvents(month, year) {
      var foundEvents = findEvents(month, year);
      return foundEvents;
    },
    formatDate(start) {
      var dayNumber = start.substring(8, 10);
      return dayNumber;
    },
    dayOfWeek(start) {
      var days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
      var x = Number(new Date(start).getDay());
      var dayName = days[x];
      return dayName;
    }
  });

列表在我的浏览器中依次发送:

Screen shot of list

非常感谢任何帮助。我是所有人的新手,特别是Blaze / Spacebars / Meteor / MongoDB

1 个答案:

答案 0 :(得分:2)

让我们将您的示例简化为blaze 中的最小值,假设日期存储为日期而不是字符串!

我们要:

  1. 查找与所有活动相对应的唯一年份列表
  2. 查找与我们正在查看的年份相对应的唯一月份数字列表
  3. 查找该月份和年份组合中的所有事件
  4. 做尽可能少的日期数学和没有字符串操作
  5. HTML:

    <template name="list">
      {{#each year in getYears}}
        {{year}}
        {{#each monthNumber in getMonths}}
          {{monthName monthNumber}}
          {{#each event in (getEvents monthNumber year)}}
            {{start}}
          {{/each}}
        {{/each}}
       {{/each}}
    </template>
    

    JS:

    Template.list.helpers({
      getYears(){
        const years = Events.find({},{sort: {start: 1}}).map(event=>event.start.getFullYear()));
        return _.uniq(years)
      },
      getMonths(year){
        const months = Events.find(
          {start: {$gte: new Date(year,0,1), $lt: new Date(year+1,0,1)}},
          {sort: {start: 1}})
          .map(event=>event.start.getMonth()));
        return _.uniq(months); // this returns integers in [0,11]
      },
      getEvents(monthNumber,year){
        return Events.find(
          {start: {$gte: new Date(year,monthNumber,1), $lt: new Date(year,monthNumber+1,1)}},
          {sort: {start: 1}});
      },
      monthName(month){
        return monthNames[month];
    });
    

    请注意,javascript Date()类非常智能,可以在month > 11 - 年剩下的日期字段时包装年份。