Meteor-todo-app
Meteor-ToDoアプリ
この章では、簡単なToDoアプリを作成する方法を学びます。
ステップ1-アプリを作成する
コマンドプロンプトを開き、次のコマンドを実行します-
C:\Users\username\Desktop>meteor create todo-appアプリを表示するには、 meteor コマンドでアプリを実行し、 http：//localhost：3000 に移動する必要があります
C:\Users\username\Desktop\todo-app>meteorステップ2-フォルダーとファイルの作成
デフォルトのファイル構造の代わりに、リファクタリングします。 todo-appl、todo-app.css 、 todo-app.js を作成する client フォルダーを作成しましょう。
C:\Users\username\Desktop\todo-app>mkdir client
C:\Users\username\Desktop\todo-app\client>touch todo-appl
C:\Users\username\Desktop\todo-app\client>touch todo-app.jsまた、 server.js を含む server フォルダーも作成します。
C:\Users\username\Desktop\todo-app>mkdir server
C:\Users\username\Desktop\todo-app\server>touch server.js最後に、内部に task-collection.js ファイルを含む collections フォルダーを作成しましょう。
C:\Users\username\Desktop\todo-app>mkdir server
C:\Users\username\Desktop\todo-app\collections>touch task-collection.js次の画像でアプリの構造を見ることができます-
ステップ3-client/todo-appl
開発の最初のステップは、アプリの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ファイルです。 このファイルはリファクタリングすることもできますが、ここですべてのクライアント側コードを記述します。 まず、サーバーで公開されている task コレクションをサブスクライブします。 次に、アプリロジックを処理できるように*ヘルパー*を作成し、最後に、サーバーからメソッドを呼び出す*イベント*を定義します。
//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\username\Desktop\todo-app>meteor deploy my-first-todo-app- http：//my-first-todo-app.meteor.com/*を開いて、アプリの使用を開始できます。
