Meteor ToDo App实例

　　在本章中，我们将创建一个简单的待办事项应用程序。

第1步 - 创建应用程序

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

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

创建成功后生成目录结构如下所示(看网络情况，可能需要好几分钟才能完成)：

要查看应用程序，需要运行的命令 meteor 应用程序，然后在浏览器中打开URL：http://localhost:3000

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

第2步 - 创建文件夹和文件

取而代之默认的文件结构，我们将重构它。让我们创建 client 文件夹，并创建 todo-app.html, todo-app.css和todo-app.js。

创建项目时程序自动创建了 client 和 server 这两个目录，这里我们先要把 client 和 server 这两个目录中的文件内容清空，接着再创建以下所需的文件，执行如下命令：

C:\Users\Administrator\Desktop\todo-app\client>touch todo-app.html

C:\Users\Administrator\Desktop\todo-app\client>touch todo-app.js

我们还将在 server 文件夹里创建 server.js(原来有则无需再创建)。

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

最后，让我们创建 collections 一个和一个 task-collection.js 文件夹里面。

C:\Users\Administrator\Desktop\todo-app>mkdir server

C:\Users\Administrator\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

我们将在服务器端定义应用程序的方法。这些方法将来自客户端的调用。在这个文件中，我们还将发布数据库查询功能。

//Publishing tasks from the server...

Meteor.publish("tasks", function () {

   return Tasks.find({});

});

//Methods for handling MongoDb Tasks collection data...

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文件。该文件也可以被重构，但我们会在这里编写所有的客户端代码。首先，我们订阅在服务器上发布的任务集合。然后，我们在创建助手能够处理应用程序逻辑，最后我们定义调用来自服务器的方法事件。

// Subscribing to the published tasks

Meteor.subscribe("tasks");

// Show/Hide functionality

Template.body.helpers({

   tasks: function () {

      if (Session.get("hideCompleted")) {

         // If hide completed is checked, filter tasks

         return Tasks.find({checked: {$ne: true}}, {sort: {createdAt: -1}});

      } else {

         // Otherwise, return all of the tasks

         return Tasks.find({}, {sort: {createdAt: -1}});

      }

   },

   hideCompleted: function () {

      return Session.get("hideCompleted");

   },

   incompleteCount: function () {

      return Tasks.find({checked: {$ne: true}}).count();

   }

});

// Events for creating new tasks and Show/Hide functionality. Calling methods from the server

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);

   }

});

// Events for Deleting and Check/Uncheck functionality

Template.task.events({

   "click .toggle-checked": function () {

      // Set the checked property to the opposite of its current value

      Meteor.call("setChecked", this._id, ! this.checked);

   },

   "click .delete": function () {

      Meteor.call("deleteTask", this._id);

   }

});

第7步 - 部署

我们正在开发完成后，我们可以在命令提示符窗口中部署应用程序。应用程序的部署名称是 my-first-todo-app。

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

我们可以打开 http://my-first-todo-app.meteor.com/ 开始使用我们的应用程序(可能需要使用到 Meteor 开发者帐号)。

或直接打 http://localhost:3000/ 访问，如下结果：

出错：

1、Exception in template helper: ReferenceError: Session is not defined ...

解决方法 - 执行以下命令添加插件：

C:\Users\Administrator\Desktop\todo-app>meteor add session