我有一个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
内部,它是this
模板中categories
的字符串对象,它是一个字符串文字。咦?
再次,这是有效的。我得到了一个带有下方锻炼列表的类别标题,但有什么更好的方法呢?
答案 0 :(得分:3)
我认为你的实现不会有太大的改进,但是通过避免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>