javascript - 在 Meteor 模板中按类别对集合成员进行分组

标签 javascript meteor handlebars.js

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

我让它工作了,但我无法以 meteor 和/或 Handlebars 的方式进行操作。我想我正在努力理解 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 中,thisWindow。但在 Template.categories.getCategories 内部,它是字符串对象,相当于 categories 模板中的 this,它是一个字符串文字。嗯?

同样,这有效。我得到一个类别标题,下面是锻炼列表,但这样做的更好方法是什么?

最佳答案

我不认为您的实现有太多需要改进的地方,尽管通过避免 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>  

关于javascript - 在 Meteor 模板中按类别对集合成员进行分组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19896769/

相关文章:

javascript - 所有事件完成后,如何在 jquery ajax 中发布单曲?

javascript - 没有密码的 Meteor 帐户

javascript - Handlebars 助手返回 [object HTMLSpanElement]

javascript - 我不明白 Handlebars.js 自述文件中的这个 "block helpers"示例

javascript - Meteor 在客户端跟踪服务器端变量

javascript - 在 contenteditable DIV 中检测多个空行

javascript - 内容diveditable 绝对div in div

javascript - Meteor JS - 无法下载包 - HTTP 错误 404 未找到

node.js - meteor 异常 : The package named router does not exist

javascript - Meteor 数据上下文,将数组传递到每个空格循环中