Question

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

我在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>

（不要问我为什么有两个头部和两个身体元素，这就是我学习在线课程中编写基础布局的方法，也许这是错误的，也是问题的一部分。）正如您所看到的，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 }

此刻我不知道该怎么办了。我已经尝试将所有内容都放在一个模板中并进行渲染，但即便如此，只要每个块中都存在某些内容，它就不会呈现。

我在哪里错了？如何让它渲染待办事项列表项？

Answer 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
            }
        );
    }
});

Meteor app中的每个块都无法渲染

1 个答案: