Meteor - ToDo App-alljchome-开发者的教程家园

Meteor Tutorial

Meteor Useful Resources

Selected Reading

Meteor - ToDo App

In this chapter, we will learn how to create a simple todo app.

Step1 - Create an App

Open the command prompt and run the following command −

C:UsersusernameDesktop>meteor create todo-app

To see the app, you need to run the app with the meteor command and go to http://localhost:3000

C:UsersusernameDesktop	odo-app>meteor

Step2 - Create Folders and Files

Instead of default file structure, we will refactor it. Let s create a cpent folder, where we will create todo-app.html, todo-app.css and todo-app.js.

C:UsersusernameDesktop	odo-app>mkdir cpent
C:UsersusernameDesktop	odo-appcpent>touch todo-app.html
C:UsersusernameDesktop	odo-appcpent>touch todo-app.js

We will also create a server folder with server.js inside.

C:UsersusernameDesktop	odo-app>mkdir server
C:UsersusernameDesktop	odo-appserver>touch server.js

Finally, let s create collections folder with task-collection.js file inside.

C:UsersusernameDesktop	odo-app>mkdir server
C:UsersusernameDesktop	odo-appcollections>touch task-collection.js

You can see the app structure on the following image −

Step 3 - cpent/todo-app.html

Our first development step is to create HTML for the app. We need an input field where we can add new tasks. The tasks will be in the form of a pst with delete and check functionapty. We will also have functionapties for showing or hiding completed tasks.

<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">
   <p class = "{{#if checked}}checked{{/if}}">
      <button class = "delete">x</button>
      <input type = "checkbox" checked = "{{checked}}" class = "toggle-checked" />
      <span>{{username}} - {{text}}</span>
   </p>
</template>

Step 4 - collections/task-collection.js

This is the place where we will just create a new MongoDB Collection, so we can use it on both the server and the cpent side.

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

Step 5 - server/server.js

We will define methods for our app on the server side. These methods will be called from the cpent. In this file, we will also pubpsh the database query.

// Pubpshing tasks from the server...

Meteor.pubpsh("tasks", function () {
   return Tasks.find({});
});

// Methods for handpng 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} });
   }
});

Step 6 - cpent/todo-app.js

This is the main cpent JavaScript file. This file can also be refactored but we will write all cpent side code here. First, we subscribe to the task collection that is pubpshed on the server. Then, we create helpers to be able to handle the app logic, and finally, we define the events that will call the methods from the server.

// Subscribing to the pubpshed tasks
Meteor.subscribe("tasks");

// Show/Hide functionapty
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 functionapty.
// Calpng 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 functionapty
Template.task.events({
   
   "cpck .toggle-checked": function () {

      // Set the checked property to the opposite of its current value
      Meteor.call("setChecked", this._id, ! this.checked);
   },

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

Step 7 - Deploy

After we are done with the development, we can deploy the app from the command prompt window. The deployment name of our app will be my-first-todo-app.

C:UsersusernameDesktop	odo-app>meteor deploy my-first-todo-app

We can open the http://my-first-todo-app.meteor.com/ to start using our app.