I have a single Workouts collection, each object having a category and a name. At the HTML layer, I'm creating a category header, then displaying a list of workouts beneath.
I have it working, but there's no way I'm doing it the meteor and/or handlebars way. Think I'm struggling with understanding the context of this, as well as how to pass data into a template.
Here are my template functions:
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']
And here's the template file:
<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>
Inside Template.categories.getCategories, this is Window. But inside of Template.categories.getCategories, it's the string object equivalent of the this inside the categories template, which is a string literal. Huh?
Again, this works. I get a category heading with a list of workouts beneath, but what's a better way of doing this?
I don't think your implementation leaves that much to improve though maybe the below is a bit clearer by avoiding this.
Sorry I don't know Coffeescript so figured I should avoid confusion by writing 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>
来源：https://stackoverflow.com/questions/19896769/grouping-members-of-a-collection-by-category-in-a-meteor-template