我正在学习JavaScript和Meteor.js而我无法在浏览器中显示待办事项列表。我从流星教程网站上复制了海峡只是为了看它是如何工作的,以及我是否可以在屏幕上显示一些东西。我做错了什么,我该如何解决? 我的代码:
**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' },
],
});
答案 0 :(得分:1)
欢迎来到流星!通过遵循本教程,您可以很好地熟悉框架。
根据您提供的代码,似乎有一些问题需要纠正。让我通过他们谈谈你。
让我们从模板文件(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>
元素也很重要。把它们留出来就像我上面说的那样。流星将知道如何处理它。
现在让我们来看看你的JavaScript。首先,您需要确保正确导入模板和css文件(假设您的所有文件都在同一目录中)。
接下来,您需要使用与html文件(taskList)中的模板名称匹配的Template对象来定义tasks
模板助手。这个帮助器只是一个返回一些测试数据的函数。稍后您可以更改它以返回集合光标。
<强> 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' },
];
},
});
通过这些改变你应该好好去。祝你好运!
答案 1 :(得分:0)
身体不是模板。您需要创建一个模板并引用该体内。
<body>
{{> main}}
</body>
<template name="main">
<ul>
{{#each tasks}}
{{> task}}
{{/each}}
</ul>
</template>
//js
Template.main.helpers({
tasks: [
{ text: 'This is task 1' },
{ text: 'This is task 2' },
{ text: 'This is task 3' },
],
});