我正在学习 JavaScript 和 Meteor.js，但无法在浏览器中显示我的待办事项列表。我从 meteor 教程网站复制了海峡，只是为了看看它是如何工作的以及是否可以在屏幕上显示一些内容。我做错了什么以及如何解决它？ 我的代码:
**main.css**
/* CSS declarations go here */
body {
font-family: sans-serif;
background-color: #315481;
background-image: linear-gradient(to bottom, #315481, #918e82 100%);
background-attachment: fixed;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0;
margin: 0;
font-size: 14px;
}
.container {
max-width: 600px;
margin: 0 auto;
min-height: 100%;
background: white;
}
header {
background: #d2edf4;
background-image: linear-gradient(to bottom, #d0edf5, #e1e5f0 100%);
padding: 20px 15px 15px 15px;
position: relative;
}
#login-buttons {
display: block;
}
h1 {
font-size: 1.5em;
margin: 0;
margin-bottom: 10px;
display: inline-block;
margin-right: 1em;
}
form {
margin-top: 10px;
margin-bottom: -10px;
position: relative;
}
.new-task input {
box-sizing: border-box;
padding: 10px 0;
background: transparent;
border: none;
width: 100%;
padding-right: 80px;
font-size: 1em;
}
.new-task input:focus{
outline: 0;
}
ul {
margin: 0;
padding: 0;
background: white;
}
.delete {
float: right;
font-weight: bold;
background: none;
font-size: 1em;
border: none;
position: relative;
}
li {
position: relative;
list-style: none;
padding: 15px;
border-bottom: #eee solid 1px;
}
li .text {
margin-left: 10px;
}
li.checked {
color: #888;
}
li.checked .text {
text-decoration: line-through;
}
li.private {
background: #eee;
border-color: #ddd;
}
header .hide-completed {
float: right;
}
.toggle-private {
margin-left: 5px;
}
@media (max-width: 600px) {
li {
padding: 12px 15px;
}
.search {
width: 150px;
clear: both;
}
.new-task input {
padding-bottom: 5px;
}
}
**main.html**
<head>
<title>simple</title>
</head>
<body>
<div class="container">
<header>
<h1>Todo List</h1>
</header>
<ul>
{{#each tasks}}
{{> task}}
{{/each}}
</ul>
</div>
</body>
<template name="task">
<li>{{text}}</li>
</template>
**main.js**
import { Template } from 'meteor/templating';
import './body.html';
import '../imports/ui/body.js';
Template.body.helpers({
tasks: [
{ text: 'This is task 1' },
{ text: 'This is task 2' },
{ text: 'This is task 3' },
],
});
最佳答案
欢迎来到 meteor !通过遵循教程来熟悉框架真是太棒了。
根据您提供的代码，似乎有几个问题需要纠正。让我通过它们来告诉你。
让我们从模板文件(html 文件)开始。看起来您在一个文件中定义了一对。这里的问题是您忘记在待办事项列表中定义您的主寺庙。我已在下面更正了这一点。
main.html
<head>
<title>simple</title>
</head>
<template name="taskList">
<div class="container">
<header>
<h1>Todo List</h1>
</header>
<ul>
{{#each tasks}}
{{> task}}
{{/each}}
</ul>
</div>
</template>
<template name="task">
<li>{{text}}</li>
</template>
还需要指出的是，您不需要包含 <head>模板定义中的元素。像我上面展示的那样，将这些保留掉。 Meteor 会知道如何应对。
现在让我们看看您的 JavaScript。首先，您需要确保正确导入模板和 css 文件(假设所有文件都位于同一目录中)。
接下来，您需要定义您的tasks模板助手使用与 html 文件 (taskList) 中的模板名称相匹配的 Template 对象。这个助手只是一个返回一些测试数据的函数。稍后您可以更改它以返回集合游标。
main.js
import { Template } from 'meteor/templating';
import './main.html';
import './main.css';
Template.taskList.helpers({
tasks: function() {
return [
{ text: 'This is task 1' },
{ text: 'This is task 2' },
{ text: 'This is task 3' },
];
},
});
有了这些更改，您应该就可以开始了。祝你好运!
关于javascript - 如何在 Meteor.js 中显示我的示例列表？我做错了什么以及如何解决它？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42683739/