javascript - meteor - 即使控制台显示数据存在，也不会填充 {{each}}

Question

根据下面的代码，有什么原因导致我没有得到填充的 Categories 列表，即使当我键入 Categories.find() 时浏览器控制台显示 6。计数()?

我做错了什么？这是 my repository on GitHub .

categories.js:

Categories = new Mongo.Collection('categories');

if (Meteor.isServer) {
    Categories.allow({
        insert: function(userId, doc) {
            return true;
        },

        update: function(userId, doc, fieldNames, modifier) {
            return true;
        },

        remove: function(userId, doc) {
            return true;
        }
    });
}

home_controller.js:

HomeController = RouteController.extend({
    subscriptions: function() {
        this.subscribe('categories');
        this.subscribe('photos');
    },
    data: function () {
        console.log(this.params.name);
        Session.set('category', this.params.name);
    },
    action: function () {
        this.render('MasterLayout', {});
    }
}

list_categories.html:

<template name="ListCategories">
    <ul>
        {{#each Categories}}
        <li id="categories"><a class="btn btn-default" href="/{{name}}">{{name}}</a></li>
        {{/each}}
    </ul>
</template>

list_categories.js:

Template.ListCategories.helpers({
    Categories: function() {
        return Categories.find();
    }
});

list_photos.html:

<template name="ListPhotos">
    <div id='photos'>
        <div class='page-header'>
            <h1>
        <small>
            {{#if catnotselected}}
                Photos
            {{else}}
                {{category}}  Photos
            {{/if}}
        </small>
      </h1>
        </div>
        <div id='mainContent'>
            {{#each photolist}} {{>photo}} {{else}} {{#if catnotselected}}
            <div class='page-header'>
                <h1><small>Select a category.</small></h1></div>
            {{else}}
            <div class='page-header'>
                <h1><small>No photos in this category.</small></h1></div>
            {{/if}} {{/each}}
        </div>
    </div>
</template>

list_photos.js:

Template.ListPhotos.helpers({
    catnotselected: function() {
        return Session.equals('category', null);
    },
    category: function() {
        return Session.get('category');
    }
});

ma​​ster_layout.html:

<template name="MasterLayout">
    <div class="navbar">
        <div class="container">
            <div class="navbar-inner">
                <a class="brand btn" href="/"><img style="height: 40px; width: 135px;" src="img/logo.png" />
                    <p>Photos</p>
                </a>
                <div id="login-button" class="btn btn-default pull-right">
                    {{> loginButtons}}
                </div>
            </div>
        </div>
    </div>
    <div class='container-fluid'>
        <div class='row'>
            <div class='col-xs-12 text-center'>
                {{> yield 'categories'}}
            </div>
            <div class='col-xs-10 col-xs-offset-1 text-center'>
                {{> yield 'photos'}}
            </div>
        </div>
    </div>
</template>

ma​​ster_layout.js:

Template.MasterLayout.onCreated(function() {
    Session.set('category', null);
});

photos.js:

Photos = new Mongo.Collection('photos');

if (Meteor.isServer) {
    Photos.allow({
        insert: function(userId, doc) {
            return true;
        },

        update: function(userId, doc, fieldNames, modifier) {
            return true;
        },

        remove: function(userId, doc) {
            return true;
        }
    });
}

routes.js:

Router.configure({
    layoutTemplate: 'MasterLayout',
    loadingTemplate: 'Loading',
    notFoundTemplate: 'NotFound',
    yieldTemplates: {
        'photos': {
            to: 'ListPhotos'
        },
        'categories': {
            to: 'ListCategories'
        }
    }
});

Router.route('/', {
    name: 'home',
    controller: 'HomeController',
    action: 'action',
    where: 'client'
});

Router.route('/:name', {
    name: 'photos',
    controller: 'HomeController',
    action: 'action',
    where: 'client'
});

Answer 1

正如预期的那样，呈现 ListPhotos 和 ListCategories 模板失败。这就是为什么您的 DOM 中没有相应元素的原因，即使您可以通过控制台访问 Photos 和 Categories 集合的文档。

显然，由于 iron-router issue，在全局路由器配置中使用 yieldRegions 会失败，这需要在路由的操作中调用 this.render()。

routes.js:

Router.configure({
    layoutTemplate: 'MasterLayout',
    loadingTemplate: 'Loading',
    notFoundTemplate: 'NotFound',
    yieldRegions: {
        //each yield going to different templates
        'ListPhotos': {
            to: 'photos'
        },
        'ListCategories': {
            to: 'categories'
        }
    }
});

Router.route('/', {
    name: 'home',
    controller: 'HomeController',
    action: function () {
        this.render();
    },
    where: 'client'
});

Router.route('/:name', {
    name: 'photos',
    controller: 'HomeController',
    action: function () {
        this.render();
    },
    where: 'client'
});