如何修复meteor.js中的“模板助手中的异常：ReferenceError：未定义Todos”错误答案

【问题标题】：How to fix "Exception in template helper: ReferenceError: Todos is not defined" error in meteor.js如何修复meteor.js中的“模板助手中的异常：ReferenceError：未定义Todos”错误
【发布时间】：2023-03-21 00:09:01
【问题描述】：

我已经在 Udemy 开始了全栈开发课程，并且有一个流星部分。当我编译代码时，它给了我以下错误：“模板助手中的异常：ReferenceError：Todos 未定义”。

我尝试在 stackoverflow 中搜索解决方案，但它们似乎都不起作用。

我曾尝试用“body”来命名模板，这是建议之一。

这是我得到的。

客户端/main.js

import { Template } from 'meteor/templating';
import { Todos } from '/lib/collections';
import './main.html';

Template.main.helpers({
  title(){
    return 'QuickTodos';
  },
  todos(){
    const todos = Todos.find();
    return todos;
  }
});

Template.main.events({
  'submit .add-todo'(event){
    event.preventDefault();

    const text = event.target.text.value;
    const time = event.target.time.value;

    Todos.insert({
      text,
      time
    });

    event.target.text.value = '';
    event.target.time.value = '';
  }
});

Template.todo.events({
  'click .toggle-checked'(event){
    Todos.update(this._id, {
      $set:{checked: !this.checked}
    });
  },
  'click .delete'(event){
    Todos.remove(this._id);
  }
});

客户端/main.html

<head>
  <title>QuickTodos</title>
</head>

<body>
  {{> main}}
</body>

<template name="main">
  <header>
    <h1>{{title}}</h1>
    <form class="add-todo">
      <input type="text" name="text" placeholder="Add Todo...">
      <input type="text" name="time" placeholder="Add Time...">
      <button type="submit">Add</button>
    </form>
  </header>
  <ul>
    {{#each todos}}
      {{> todo}}
    {{/each}}
  </ul>
</template>

<template name="todo">
  <li class="{{#if checked}}checked{{/if}}">
    <button class="delete">&times;</button>
    <input type="checkbox" checked={{checked}} class="toggle-checked">
    <strong>{{time}}:</strong> {{text}}
  </li>
</template>

lib/collections.js

import { Mongo } from 'meteor/mongo';

export const Todos = new Mongo.Collection('todos');

当我现在编译时没有错误，但是当我在浏览器控制台Todos.find().fetch() 中搜索时，它给出了这个错误：

Uncaught ReferenceError: Todos is not defined
    at <anonymous>:1:1

【问题讨论】：

标签： javascript mongodb templates meteor referenceerror

【解决方案1】：

您需要从 collection.js 中导出 Todos 并将其导入到 client/main.js 文件中 //在你的 lib/collection 文件中执行此操作

import { Mongo } from "meteor/mongo";
const Todos = new Mongo.Collection("todos");
export default Todos;

在你的 main/server.js 文件中你需要导入 Todos

import Todos from "../lib/collections";

同时在你的 client/main.js 文件中导入 Todos

import Todos from "../lib/collections";

完成上述操作后，待办事项将可见。干杯

【讨论】：

我刚刚尝试过，但我仍然收到 Uncaught ReferenceError: Todos is not defined if in the Inspect Element console 我搜索 Todos.find().fetch()
能否分享一下GitHub链接，我可以从这里帮你调试一下。
要在控制台中使用 Todos，您需要执行我给您的第一个选项。本质上只是将 const 放在 lib/collections 中的 Todos 集合之前。添加 const 使其成为该文件的私有，因此无法从控制台访问。
@JamesOshomah 这是链接github.com/ines96/FullStackCourse 这是快速待办事项文件夹
@py_9 我查看了您的代码并更新了我的答案。

【解决方案2】：

您好，您有两个简单的解决方案。

1。改变

const Todos = new Mongo.Collection('todos');

到

Todos = new Mongo.Collection('todos');

在 lib/collections.js 中这将使 Todos 集合成为全局的，因此可以从您的模板中访问。

2。如果您不想要全局范围的变量，请执行以下操作。改变

const Todos = new Mongo.Collection('todos');

到

export const Todos = new Mongo.Collection('todos');

在 lib/collections.js 中

添加到文件client/main.js的顶部

import {Todos} from '/lib/collections';

【讨论】：

我刚刚尝试了这两种解决方案，如果在 Inspect Element 控制台中搜索 Todos.find().fetch()，我仍然会收到 Uncaught ReferenceError: Todos is not defined
如果你使用这种方法，它应该在控制台中可用。Todos = new Mongo.Collection('todos');