0

たくさんのブログ投稿があり、各投稿に「タイトル」と「カテゴリ」があるとします。同じ「カテゴリ」値を持つ投稿の各グループのテーブルがある単一のページにすべての投稿タイトルをどのようにレンダリングしますか？

カテゴリで並べ替えることから始めているので、同じカテゴリの投稿がカーソルでグループ化されます。

Template.postLists.posts = function() {
  return Posts.find({}, {sort:{category:1}});
}

しかし、{{＃each}}を介してテンプレート内のこのリストを反復処理し、ハンドルバーを使用して新しい「カテゴリ」に到達したことを検出し、新しいを開始してから終了できるようにするのに苦労しています。カテゴリの最後にあるm。

私はこれを間違った方法でやっていますか、それともこれを行う簡単な方法はありますか？

4

1 に答える 1

1

私が行った解決策は、Posts.find（）を使用してカーソルを返す代わりに、テンプレートハンドラーで、ハンドルバーテンプレート（カテゴリオブジェクトの配列、それぞれがカテゴリには投稿の配列があります）：

Template.postLists.categorizedPosts = function() {
    var allPosts = Posts.find({}, {sort:{category:1}}).fetch();

    // Then I iterate over allPosts with a loop, 
    // creating a new array of this structure:
    // for ...
    var catPosts = [ { category:"cat1", posts: [ {post1}, {post2} ] },
                     { category:"cat2", posts: [ {post3}, {post4}, {post5} ] },
                     // etc... 
                   ];
    // end loop
    return catPosts;

テンプレートは次のようなものです（ただし、ULの代わりにテーブルを使用します。ここではよりクリーンなデモのためにULを使用しています）。

{{#each categorizedPosts}}
  {{category}}  
  <ul> 
    {{#each posts}}
    <li>{{posts.title}}</li>
    {{/each}}
  </ul>
{{/each}}

（Posts.find（）が返すカーソルオブジェクトの代わりに）このようなオブジェクトを返すと、Meteorのテンプレートエンジンは、コレクション内のオブジェクトの1つだけが変更されたことをインテリジェントに検出する機能を失い、代わりにDOMにパッチを適用することに注意してください。テンプレートを完全に再レンダリングします。したがって、この場合、DBで単一のPostsオブジェクトが更新されても、テンプレートは完全に再レンダリングされます。それが欠点です。しかし、利点はそれが機能することです;）

于 2013-03-08T19:33:53.020 に答える