在 Meteor 模板中按类别对集合的成员进行分组答案

【问题标题】：Grouping members of a collection by category in a Meteor template在 Meteor 模板中按类别对集合的成员进行分组
【发布时间】：2013-11-22 16:32:10
【问题描述】：

我有一个Workouts 集合，每个对象都有一个category 和一个name。在 HTML 层，我正在创建一个类别标题，然后在下面显示一个锻炼列表。

我有它的工作，但我不可能以流星和/或车把的方式来做。想想我在理解this 的上下文以及如何将数据传递到模板中遇到困难。

这是我的模板函数：

Template.categories.getCategories = ->                                             
  workouts = Workouts.find().fetch()                                               
  categories = _.map workouts, (workout) -> workout.category                       
  _.uniq categories                                                                

Template.workouts.getWorkouts = ->                                                 
  Workouts.find {category: this.toString()},                                       
    sort: ['category', 'name']

这是模板文件：

<head>                                                                                                                         
</head>                                                                            

<body>                                                                                                                              
  {{> categories}}                                                                 
</body>                                                                            

<template name="categories">                                                       
  {{#each getCategories}}                                                          
    <h2>{{this}}</h2>                                                              
    {{> workouts}}                                                                 
  {{/each}}                                                                        
</template>                                                                        

<template name="workouts">                                                         
  {{#each getWorkouts}}                                                            
    <div class="workout container">                                                
      <div>                                                                        
        {{name}}                                                                   
      </div>                                                                       
      <div>                                                                        
        {{units}}                                                                  
      </div>                                                                       
    </div>                                                                         
  {{/each}}                                                                        
</template>

在Template.categories.getCategories、this 内部是Window。但是在Template.categories.getCategories 内部，它是与categories 模板内部的this 等效的字符串对象，它是一个字符串文字。嗯？

再一次，这行得通。我得到一个类别标题，下面有一个锻炼列表，但是有什么更好的方法呢？

【问题讨论】：

标签： javascript meteor handlebars.js

【解决方案1】：

我认为您的实现并没有太多需要改进的地方，尽管通过避免this，下面的内容可能会更清晰一些。

抱歉，我不知道 Coffeescript，所以我想我应该通过编写 javascript 来避免混淆。

Template.categories.getCategories = function(){  
  var categories = Workouts.find({}, {sort: {category: 1}, fields: {category: 1}}).fetch();

  return _.uniq( categories, true, function (workout){ 
    return workout.category;
  });    
};                                            

Template.categories.workouts = function ( category ){
  return Workouts.find( { category: category}, { sort: {name : 1}});
};

<template name="categories">                                                       
  {{#each getCategories}}                                                          
    <h2>{{category}}</h2>                                                              
    {{#each workouts category}}
      {{> workout}}                                                                 
    {{/each}}
  {{/each}}                                                                        
</template>                                                                        

<template name="workout">                                                                                                               
  <div class="workout container">                                                
    <div>                                                                        
      {{name}}                                                                   
    </div>                                                                       
    <div>                                                                        
      {{units}}                                                                  
    </div>                                                                       
  </div>                                                                                                                                            
</template>

【讨论】：

这不起作用。在categories 模板中，您的category 是未定义的，因为getCategory 返回的是字符串数组，而不是对象。我认为这就是混乱的根源。而不是getCategories 返回一个字符串数组，也许更好的方法是查询集合中的不同类别并返回一个Workouts 的集合，它是所有Workouts 的一个子集。这种转变不仅从 JS 工作到 DB，而且还使模板中发生的事情更加清晰。
其他问题：您确定可以将 args 传递给这样的模板吗？在Template.categories.workouts 内部，category 始终未定义。
问题出在使用 _.uniq 上。我会更新代码。
我需要获取 _.uniq 的光标。现在工作。如果您在其他任何地方需要这些类别，最好将它们保存在本地集合中。