- 入门教程
《Meteor入门教程》 
Meteor - ToDo App
在本章中，无涯教程将学习如何创建一个简单的待办事项应用程序。
第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) { Tasks.insert({ text: text, createdAt: new Date(), }); }, 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 () { if (Session.get("hideCompleted")) { //如果选中隐藏已完成，过滤任务 return Tasks.find({checked: {$ne: true}}, {sort: {createdAt: -1}}); } else { //否则，返回所有任务 return Tasks.find({}, {sort: {createdAt: -1}}); } }, 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; Meteor.call("addTask", text); event.target.text.value = ""; }, "change .hide-completed input": function (event) { Session.set("hideCompleted", event.target.checked); } }); //删除和检查/取消检查函数的事件 Template.task.events({ "click .toggle-checked": function () { //将选中的属性设置为与其当前值相反的值 Meteor.call("setChecked", this._id, ! this.checked); }, "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/开始使用无涯教程的应用程序。
祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)