流星-不填充{{each}}，即使控制台说数据在那里

Meteor - not populating {{each}} even when console says data is there

本文关键字：控制台 数据 在那里 填充 each 流星      更新时间：2023-09-26

根据下面的代码，为什么我没有得到Categories列表的填充，即使浏览器控制台显示6时，我输入Categories.find().count() ?

我做错了什么?这是我在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');
    }
});

master_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>

master_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'
});

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

显然，由于铁路由器问题，在全局路由器配置中使用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'
});
相关文章：