簡體   English   中英

Blaze模板助手僅在空格鍵中返回,在Meteor / Mongo中的每個循環中

[英]Blaze template helper only returning on in a Spacebars each loop in Meteor/Mongo

我有一個助手,該助手應該找到與給定的月份和年份參數相對應的所有事件,並將它們作為數組循環返回以供模板循環。 看來我的助手雖然只是一年級的第一年,但沒有循環,我也不知道為什么。

這是模板:

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

該列表正像這樣在我的瀏覽器中呈現:

列表的屏幕截圖

任何幫助將不勝感激。 我是這一切的新手,尤其是Blaze / Spacebars / Meteor / MongoDB

讓我們簡單地將示例簡化到最低限度, 假設日期存儲為日期而不是字符串!

我們將要:

  1. 查找與所有事件對應的唯一年份列表
  2. 查找與我們要查看的年份相對應的唯一月份列表
  3. 查找該月份和年份組合中的所有事件
  4. 盡可能少地進行日期數學運算,而無需字符串操作

的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時包裝年份,其余日期字段也是如此。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM