2017-07-03 34 views
0

我有一個幫助器,它應該找到與給定的月份和年份參數相對應的所有事件,並將它們作爲模板的數組返回以進行循環。看來我的幫手只是回到了第一年的實例,而不是循環,我不明白爲什麼。Blaze模板助手僅在Spacebars中返回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; 
    } 
    }); 

列表在我的瀏覽器撕心裂肺這樣的:

Screen shot of list

任何幫助將是非常感謝。我是新手,特別是Blaze/Spacebars/Meteor/MongoDB

+0

你爲什麼要根據字符串而不是日期查詢?即爲什麼你在查詢中使用'.toISOString()'? –

回答

2

假設日期是以日期而不是字符串的形式存儲的,那麼讓我們將您的示例簡化爲火焰中的最小值!

我們要:

  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 - 同上,對剩餘的日期字段。

+0

upvote爲秩序混亂。 – zim

相關問題