鍍金池/ 教程/ HTML/ Meteor ToDo App實例
Meteor結(jié)構(gòu)
Meteor部署
Meteor排序
Meteor事件
Meteor Blaze
Meteor第一個應用程序
Meteor發(fā)布和訂閱
Meteor環(huán)境安裝配置
Meteor package.js
Meteor在手機上運行
Meteor集合
Meteor模板
Meteor跟蹤器
Meteor發(fā)送郵件
Meteor計時器
Meteor ToDo App實例
Meteor軟件包管理
Meteor方法
Meteor表單
Meteor Assets資源
Meteor會話
Meteor EJSON
Meteor http
Meteor安全
Meteor核心API
Meteor check
Meteor帳號
Meteor教程

Meteor ToDo App實例

在本章中，我們將創(chuàng)建一個簡單的待辦事項應用程序。

第1步 - 創(chuàng)建應用程序

打開命令提示符，運行以下命令 - 
C:\Users\Administrator\Desktop>meteor create todo-app 

創(chuàng)建成功后生成目錄結(jié)構(gòu)如下所示(看網(wǎng)絡情況，可能需要好幾分鐘才能完成)：

要查看應用程序，需要運行的命令 meteor 應用程序，然后在瀏覽器中打開URL：http://localhost:3000 

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

第2步 - 創(chuàng)建文件夾和文件

取而代之默認的文件結(jié)構(gòu)，我們將重構(gòu)它。讓我們創(chuàng)建 client 文件夾，并創(chuàng)建 todo-app.html, todo-app.css和todo-app.js。

創(chuàng)建項目時程序自動創(chuàng)建了 client 和 server 這兩個目錄，這里我們先要把 client 和 server 這兩個目錄中的文件內(nèi)容清空，接著再創(chuàng)建以下所需的文件，執(zhí)行如下命令： 

C:\Users\Administrator\Desktop\todo-app\client>touch todo-app.html
C:\Users\Administrator\Desktop\todo-app\client>touch todo-app.js
我們還將在 server 文件夾里創(chuàng)建 server.js(原來有則無需再創(chuàng)建)。 
C:\Users\Administrator\Desktop\todo-app\server>touch server.js
最后，讓我們創(chuàng)建 collections 一個和一個 task-collection.js 文件夾里面。 
C:\Users\Administrator\Desktop\todo-app>mkdir server
C:\Users\Administrator\Desktop\todo-app\collections>touch task-collection.js
可以看到下面的圖片所顯示的應用程序結(jié)構(gòu) -

Meteor Todo App Structure

步驟 3 - client/todo-app.html

我們開發(fā)的第一個開發(fā)步驟是為應用程序創(chuàng)建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

在這里，我們只是創(chuàng)建新的 MongoDB 集合，所以我們可以在服務器和客戶端使用它。 
Tasks = new Mongo.Collection("tasks");

步驟5 - server/server.js

我們將在服務器端定義應用程序的方法。這些方法將來自客戶端的調(diào)用。在這個文件中，我們還將發(fā)布數(shù)據(jù)庫查詢功能。 

//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文件。該文件也可以被重構(gòu)，但我們會在這里編寫所有的客戶端代碼。首先，我們訂閱在服務器上發(fā)布的任務集合。然后，我們在創(chuàng)建助手能夠處理應用程序邏輯，最后我們定義調(diào)用來自服務器的方法事件。 

// 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步 - 部署

我們正在開發(fā)完成后，我們可以在命令提示符窗口中部署應用程序。應用程序的部署名稱是 my-first-todo-app。 

C:\Users\Administrator\Desktop\todo-app>meteor deploy my-first-todo-app
我們可以打開 http://my-first-todo-app.meteor.com/ 開始使用我們的應用程序(可能需要使用到 Meteor 開發(fā)者帳號)。
或直接打 http://localhost:3000/ 訪問，如下結(jié)果：

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

解決方法 - 執(zhí)行以下命令添加插件： 
C:\Users\Administrator\Desktop\todo-app>meteor add session