1

単一の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相当する文字列オブジェクトです。は？thiscategories

繰り返しますが、これは機能します。その下にワークアウトのリストを含むカテゴリの見出しが表示されますが、これを行うより良い方法は何ですか?

4

1 に答える 1

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>
于 2013-11-11T08:40:11.443 に答える