无涯教程-Meteor - ToDo App 在本章中，无涯教程将学习如何创建一个简单的待办事项应用程序。第1步 -

在本章中，无涯教程将学习如何创建一个简单的待办事项应用程序。

第1步 - 创建应用

打开命令提示符并运行以下命令-

C:\Users\username\Desktop>meteor create todo-app

要查看该应用程序，您需要使用 meteor 命令运行该应用程序，然后转到 http://localhost:3000

C:\Users\username\Desktop\todo-app>meteor

第2步 - 创建目录和文件

代替默认的文件结构，无涯教程将对其进行重构，让无涯教程创建一个 client 文件夹，在其中创建 todo-app.html，todo-app.css 和 todo-app.js 。

C:\Users\username\Desktop\todo-app>mkdir client
C:\Users\username\Desktop\todo-app\client>touch todo-app.html
C:\Users\username\Desktop\todo-app\client>touch todo-app.js

无涯教程还将创建一个 server 文件夹，其中包含 server.js 。

C:\Users\username\Desktop\todo-app>mkdir server
C:\Users\username\Desktop\todo-app\server>touch server.js

最后，无涯教程在其中创建 collections 文件夹，其中包含 task-collection.js 文件。

C:\Users\username\Desktop\todo-app>mkdir server
C:\Users\username\Desktop\todo-app\collections>touch task-collection.js

您可以在下图上看到应用程序结构-

第3步 - client/todo-app.html

无涯教程的第一步开发是为应用程序创建HTML，无涯教程需要一个输入字段，可以在其中添加新任务，任务将采用具有删除和检查功能的列表形式，无涯教程还将具有显示或隐藏已完成任务的功能。

<head>
   <title>Todo App</title>
</head>
<body>
<h1>Todo List ({{incompleteCount}})</h1>
<label class = "hide-completed">
<input type = "checkbox" checked = "{{hideCompleted}}" />
Hide Completed Tasks
</label>
<form class = "new-task">
<input type = "text" name = "text" placeholder = "Add new tasks" />
</form>
<ul>
{{#each tasks}}
{{> task}}
{{/each}}
</ul>
</body>
<template name = "task">
<li class = "{{#if checked}}checked{{/if}}">
<button class = "delete">x</button>
<input type = "checkbox" checked = "{{checked}}" class = "toggle-checked" />
<span>{{username}} - {{text}}</span>
</li>
</template>

第4步 - collections/task-collection.js

在这里，无涯教程将只创建一个新的MongoDB集合，因此无涯教程可以在服务器和客户端上使用它。

Tasks=new Mongo.Collection("tasks");

第5步 - server/server.js

无涯教程将在服务器端为无涯教程的应用程序定义方法，这些方法将从客户端调用。在此文件中，无涯教程还将发布数据库查询。

//从服务器发布任务...
Meteor.publish("tasks", function () {
return Tasks.find({});
});
//处理 MongoDb 任务收集数据的方法...
Meteor.methods({
addTask: function (text) {
  </span><span class="typ">Tasks</span><span class="pun">.</span><span class="pln">insert</span><span class="pun">({</span><span class="pln">
     text</span><span class="pun">:</span><span class="pln"> text</span><span class="pun">,</span><span class="pln">
     createdAt</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">new</span><span class="pln"> </span><span class="typ">Date</span><span class="pun">(),</span><span class="pln">
  </span><span class="pun">});</span><span class="pln">

},
deleteTask: function (taskId) {
var task = Tasks.findOne(taskId);
Tasks.remove(taskId);
},
setChecked: function (taskId, setChecked) {
var task = Tasks.findOne(taskId);
Tasks.update(taskId, { $set: { checked: setChecked} });
}
});

第6步 - client/todo-app.js

这是主要的客户端JavaScript文件，该文件也可以重构，但是无涯教程将在此处编写所有客户端代码，首先，无涯教程订阅在服务器上发布的 task 集合，然后，无涯教程创建 helpers 以能够处理应用程序逻辑，最后，无涯教程定义 events 来从服务器调用方法。

//订阅已发布的任务
Meteor.subscribe("tasks");
//显示/隐藏函数
Template.body.helpers({
tasks: function () {
  </span><span class="kwd">if</span><span class="pln"> </span><span class="pun">(</span><span class="typ">Session</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">(</span><span class="str">"hideCompleted"</span><span class="pun">))</span><span class="pln"> </span><span class="pun">{</span><span class="pln">

     </span><span class="com">//如果选中隐藏已完成，过滤任务</span><span class="pln">
     </span><span class="kwd">return</span><span class="pln"> </span><span class="typ">Tasks</span><span class="pun">.</span><span class="pln">find</span><span class="pun">({</span><span class="kwd">checked</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">$ne</span><span class="pun">:</span><span class="pln"> </span><span class="kwd">true</span><span class="pun">}},</span><span class="pln"> </span><span class="pun">{</span><span class="pln">sort</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">createdAt</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="lit">1</span><span class="pun">}});</span><span class="pln">
  </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">else</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
     
     </span><span class="com">//否则，返回所有任务</span><span class="pln">
     </span><span class="kwd">return</span><span class="pln"> </span><span class="typ">Tasks</span><span class="pun">.</span><span class="pln">find</span><span class="pun">({},</span><span class="pln"> </span><span class="pun">{</span><span class="pln">sort</span><span class="pun">:</span><span class="pln"> </span><span class="pun">{</span><span class="pln">createdAt</span><span class="pun">:</span><span class="pln"> </span><span class="pun">-</span><span class="lit">1</span><span class="pun">}});</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

},
hideCompleted: function () {
return Session.get("hideCompleted");
},
incompleteCount: function () {
return Tasks.find({checked: {$ne: true}}).count();
}
});
//用于创建新任务和显示/隐藏功能的事件。
//从服务器调用方法
Template.body.events({
"submit .new-task": function (event) {
event.preventDefault();
var text = event.target.text.value;
  </span><span class="typ">Meteor</span><span class="pun">.</span><span class="pln">call</span><span class="pun">(</span><span class="str">"addTask"</span><span class="pun">,</span><span class="pln"> text</span><span class="pun">);</span><span class="pln">
  </span><span class="kwd">event</span><span class="pun">.</span><span class="pln">target</span><span class="pun">.</span><span class="pln">text</span><span class="pun">.</span><span class="kwd">value</span><span class="pln"> </span><span class="pun">=</span><span class="pln"> </span><span class="str">""</span><span class="pun">;</span><span class="pln">

},
"change .hide-completed input": function (event) {
Session.set("hideCompleted", event.target.checked);
}
});
//删除和检查/取消检查函数的事件
Template.task.events({
"click .toggle-checked": function () {
  </span><span class="com">//将选中的属性设置为与其当前值相反的值</span><span class="pln">
  </span><span class="typ">Meteor</span><span class="pun">.</span><span class="pln">call</span><span class="pun">(</span><span class="str">"setChecked"</span><span class="pun">,</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">_id</span><span class="pun">,</span><span class="pln"> </span><span class="pun">!</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="kwd">checked</span><span class="pun">);</span><span class="pln">

},
"click .delete": function () {
Meteor.call("deleteTask", this._id);
}
});

第7步 - 部署

完成开发后，无涯教程可以从命令提示符窗口中部署应用程序。无涯教程的应用程序的部署名称将为 my-first-todo-app 。

C:\Users\username\Desktop\todo-app>meteor deploy my-first-todo-app

无涯教程可以打开 http://my-first-todo-app.meteor.com/开始使用无涯教程的应用程序。

无涯教程-Meteor - ToDo App