Question

我正试图找到一种漂亮的流星式方式来处理这个问题。

我有一组按日期排序的Mongo文档，我可以轻松地在列表中显示：

<template name="logbook">
   <h1>{{title}}</h1>
   <div>
      {{#each entries}}
         {{> Entry}}
      {{/each}}
   </div>
</template>

现在，每一年都会发生变化，我想输出它，以便我得到这样的结果：

2014

doc 1

doc 2

2013

doc 3

doc 4

doc 5

等

这是Meteor，我希望该列表具有反应性。如果新文件到达，则应将其插入列表中的正确位置，并在必要时添加年份。

任何人都可以提出一个明智的方法来解决这个问题吗？

Answer 1

你可能会使用帮助器检查年份是否与上一条记录相同，如果没有 - 他会输出它，如

<template name="Entry">
   {{year}}
   {{data}}
</template>

在js

year: function(){
  //operations that will return year to some variable, for example year_variable
  if(global_variable===undefined){
    global_variable=year_variable;
    return year_variable;
  }
  if(global_variable===year_variable) return false;
  else return year_variable;
}

没有必要将其设为全局，您可以使用会话

Answer 2

这可能不是您正在寻找的命名约定，但它会让您了解我将如何处理此问题：

创建独特年份列表
每年渲染模板（日志）
在每个日志中，迭代当年的所有条目

这是一个完整的工作解决方案：

app.html

<body>
  {{#each years}}
    {{> logbook}}
  {{/each}}
</body>

<template name="logbook">
   <h2>{{year}}</h2>
   <ol>
    {{#each entries}}
      <li>{{text}}</li>
    {{/each}}
   </ol>
</template>

app.js

if (Meteor.isClient) {
  // create a client-side collection for testing
  Entries = new Mongo.Collection(null);

  Meteor.startup(function() {
    // insert some data in the wrong order to test sorting
    Entries.insert({text: 'doc6', date: new Date('1/3/2013')});
    Entries.insert({text: 'doc4', date: new Date('1/1/2013')});
    Entries.insert({text: 'doc5', date: new Date('1/2/2013')});

    Entries.insert({text: 'doc3', date: new Date('1/3/2014')});
    Entries.insert({text: 'doc1', date: new Date('1/1/2014')});
    Entries.insert({text: 'doc2', date: new Date('1/2/2014')});
  });

  Template.body.helpers({
    years: function() {
      // return a list of unique sorted objects with a year field
      return _.chain(Entries.find().fetch())
        // pluck out the dates
        .pluck('date')
        // convert each date to a year
        .map(function(date) {return date.getFullYear();})
        // sort the years in reverse order
        .sortBy(function(year) {return -year;})
        // find only the unique values
        .uniq(true)
        // '2014' -> {year: '2014'}
        .map(function(year) {return {year: year};})
        .value();
    }
  });

  Template.logbook.helpers({
    entries: function() {
      var year = this.year;
      var entries = Entries.find({}, {sort: {date: 1}}).fetch();

      // return a list of entries only for this year
      return _.filter(entries, function(entry) {
        return entry.date.getFullYear() === year;
      });
    }
  });
}

在使用#each生成的列表中的特定点插入文本

2014

2013

2 个答案:

app.html

app.js