Meteor 应用程序中的每个块不渲染答案

【问题标题】：each block in Meteor app not renderingMeteor 应用程序中的每个块不渲染
【发布时间】：2016-03-31 18:57:52
【问题描述】：

我想使用 Meteor 框架创建一个小型待办事项列表应用程序。这是一个测试项目，因此我以后可以使用它来构建更复杂的项目。但是，这个简单的应用程序已经存在问题。在模板中有一个{{#each }} 块，但它根本不渲染。我花了几个小时试图找到错误。这是我目前所拥有的：

我在TodoList/lib/collections.js 中创建了以下集合：

// security variables
UNAUTHORIZED = false;
AUTHORIZED = true;

TodoListItems = new Mongo.Collection("todolistitems");


TodoListItems.allow({
    insert: (user_id, doc) => {
        return AUTHORIZED;
    },

    remove: (user_id, doc) => {
        return AUTHORIZED;
    },

    update: (userId, doc) => {
        return AUTHORIZED;
    }
});

还有以下TodoList/client/routing.js：

Router.configure({
    layoutTemplate: 'BaseLayout'
});

Router.route('/', function() {
    this.render('header', {
        to: 'header'
    });

    this.render('navbar', {
        to: 'navbar'
    });

    this.render('todolist_main', {
        to: 'main'
    });

    this.render('footer', {
        to: 'footer'
    });
});

这里是TodoList/client/templates/BaseLayout.html：

<template name="BaseLayout">
    <head>
        <title>ToDo List</title>
    </head>
    <body>
        {{> yield "header"}}
        {{> yield "navbar"}}
        {{> yield "main"}}
        {{> yield "footer"}}
    </body>
</template>

这里是TodoList/client/templates/todolist_main.html：

<template name="todolist_main">
    {{#if currentUser}}
        <div class="flexbox-container">
        {{#each todolistitems}}
            <div class="flexbox-item" id="todolist_item_{{_id}}">
                <p>{{short_text}}</p>
            </div>
        {{/each}}
        </div>
    {{/if}}
</template>

为了使集合最初包含一些对象，我在服务器端 TodoList/server/server.js 中有以下代码：

// start up function that creates entries in the Websites databases.
Meteor.startup(() => {
    var first_user = Meteor.users.findOne();
    if(!first_user) {
        console.log('No users found, creating test user.');
        Accounts.createUser({
            username: 'test123',
            email: 'test123@test.com',
            password: 'test123',
            profile: {  // public attributes
                firstname: 'test',
                lastname: 'tester'
            }
        });
    }

    if (!TodoListItems.findOne()) {
        console.log("No todo list items yet. Creating starter data.");

        var tomorrow = new Date();
        tomorrow.setDate(tomorrow.getDate() + 1);
        var long_text = 'This is a test entry.';

        TodoListItems.insert({
            long_text: long_text,
            short_text: long_text.slice(0, 50) +  '...',
            priority: 5,
            status: 'open',
            due_date: tomorrow,
            category: 'test category',
            created_on: new Date()
            //TODO created_by ...
        });

        tomorrow = new Date();
        tomorrow.setDate(tomorrow.getDate() + 1);
        long_text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';

        TodoListItems.insert({
            long_text: long_text,
            short_text: long_text.slice(0, 50) +  '...',
            priority: 5,
            status: 'open',
            due_date: tomorrow,
            category: 'test category',
            created_on: new Date()
            //TODO created_by ...
        });
    }
});

因此，当应用程序运行时，将插入两个待办事项列表项，并且集合定义在lib 文件夹中，这意味着它应该在其他所有内容之前运行，并且集合既不只在服务器上，也不只在服务器上在客户端上，但两者都可用。当用户登录时，模板应该呈现待办事项列表项。但是，登录时生成的 HTML 代码是：

<html>
<head>
<!-- tons of included scripts here-->
</head>
<body>
  <head>
        <title>ToDo List</title>
    </head>
    <body>
        <h1>Todo List</h1>
        <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="login-buttons-dropdown-align-" id="login-buttons">
    <div class="login-link-and-dropdown-list">
    <a id="login-name-link" class="login-link-text">
      test123 ▾
    </a>
  </div>
  </div>
</div>
    </nav>
        <div class="flexbox-container">
        </div>
        <p>This is a footer.</p>
    </body>
</body>
</html>

（不要问我为什么有两个head和两个body元素，这是我在一个在线课程中学习编写基本布局的方式，可能是错误的，也是问题的一部分。）如您所见，todolist 没有渲染，但只有{{#each todolistitems}} 中的部分没有渲染，就好像没有项目一样，因此永远不会进入循环。不过，我已经在浏览器的控制台中查看了，里面有项目：

TodoListItems.findOne()
Object { _id: "RoeNmpKyaqQy9DGj8", long_text: "This is a test entry.", short_text: "This is a test entry....", priority: 5, status: "open", due_date: Date 2015-12-24T23:37:34.389Z, category: "test category", created_on: Date 2015-12-23T23:37:34.390Z }

目前我不知道该尝试什么了。我已经尝试将所有内容放入一个模板并渲染它，但即便如此，只要每个块中有东西，它就不会渲染。

我哪里错了？如何让它呈现待办事项列表项？

【问题讨论】：

标签： javascript templates meteor rendering each

【解决方案1】：

如果发现错误。我不知道我还必须为每个块中使用的集合添加助手。错误很简单，我没有为返回集合的模板编写帮助程序，如下所示：

Template.todolist_main.helpers({
    todolistitems: () => {
        if(Session.get('user_filter')) {
            return TodoListItems.find (
                {created_by: Session.get('user_filter')},
                {sort: {rating: -1, created_on: -1}}
            );
        }
        return TodoListItems.find (
            {},
            {
                sort: {rating: -1, created_on: -1},
                limit: 100
            }
        );
    }
});

【讨论】：