javascript - meteor 动态分类列表

Question

我想做以下事情。我想创建一个类别页面，将每个类别加载到图片上。然后，当用户单击某个类别时，参数将显示在 url 上，并且它将根据该类别在数据库中搜索照片。我现在将演示我拥有的代码。

类别 HTML 文件:

<template name="categories">
    <div class="text-center light-container" id="categories-section">
        <h1>Categories</h1>
        <hr/>
        {{#each categories}}
            <div class="image-container">
                <a href="{{pathFor route='categoryPage'}}">
                    <img class="freezeframe pics" src="images/app/sphere.jpg"/>
                </a>
                <h2><span>{{categories}}</span></h2>
            </div>
        {{/each}}
    </div>
</template>

类别 JS 文件:

var categoryList = ['actions', 'animals', 'anime', 'art/design', 'cartoons/comics', 'celebrities',
 'Emotions', 'Food/Drink', 'Games', 'History', 'Holidays', 'Memes', 'Movies', 'Music', 'Nature', 'News/Politics',
 'Science', 'Sports', 'Technology', 'TV'];

Template.categories.helpers({
    'categories':function(){
        for(var i = 0; i < categoryList.length; i++){
            console.log(categoryList[i]);
            return categoryList[i];
        }
    }
});

路由器 JS 文件:

Router.route('/categories', {
    name: 'categories',
    template: 'categories',
    fastRender: true
});
Router.route('/categories/:category', {
    name: 'categoryPage',
    template: 'categoryPage',
    data: function(){
        var category = this.params.category;
        return GifsCollection.find({category: category});
    },
    fastRender: true
});

类别页面 JS:

Template.categoryPage.helpers({
    // Load 16 most recent ones
    // When down arrow is click load another 16 more gifs
    gifs: function() {
        var category = this.params.category;
        return GifsCollection.find({category: category}, {fields: {_id: 1, image: 1} });
    }
});

运行以下代码不会让我有任何结果。我不确定该走哪条路。我可以创建一个“类别”集合并将助手加载到那里，或者我可以使用 session ？但我倾向于创建类别集合，但我很确定有一种更有效的方法。

任何反馈和代码帮助将不胜感激!

Answer 1

您有两个小错误。我们已经在评论中讨论过关于助手的问题。另一个是如何使用 #each 循环:在其中，您只需引用 this 即可获取类别的字符串。

类别 HTML 文件:

<template name="categories">
    <div class="text-center light-container" id="categories-section">
        <h1>Categories</h1>
        <hr/>
        {{#each categories}}
            <div class="image-container">
                <a href="/categories/{{this}}">
                    <img class="freezeframe pics" src="images/app/sphere.jpg"/>
                </a>
                <h2><span>{{this}}</span></h2>
            </div>
        {{/each}}
    </div>
</template>

类别 JS 文件:

var categoryList = ['actions', 'animals', 'anime', 'art/design', 'cartoons/comics', 'celebrities',
 'Emotions', 'Food/Drink', 'Games', 'History', 'Holidays', 'Memes', 'Movies', 'Music', 'Nature', 'News/Politics',
 'Science', 'Sports', 'Technology', 'TV'];

Template.categories.helpers({
    'categories':function(){
        return categoryList;
    }
});