Meteor - App ToDo
In questo capitolo impareremo come creare una semplice app todo.
Passaggio 1: creare un'app
Apri il prompt dei comandi ed esegui il seguente comando:
C:\Users\username\Desktop>meteor create todo-app
Per vedere l'app, devi eseguire l'app con l'estensione meteor comando e vai a http://localhost:3000
C:\Users\username\Desktop\todo-app>meteor
Passaggio 2: creare cartelle e file
Invece della struttura del file predefinita, la rifattorizzeremo. Creiamo un fileclient cartella, dove creeremo todo-app.html, todo-app.css e 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
Creeremo anche un file server cartella con server.js dentro.
C:\Users\username\Desktop\todo-app>mkdir server
C:\Users\username\Desktop\todo-app\server>touch server.js
Infine, creiamo collections cartella con task-collection.js file all'interno.
C:\Users\username\Desktop\todo-app>mkdir server
C:\Users\username\Desktop\todo-app\collections>touch task-collection.js
Puoi vedere la struttura dell'app nella seguente immagine:
Passaggio 3: client / todo-app.html
Il nostro primo passo di sviluppo è creare HTML per l'app. Abbiamo bisogno di un campo di input dove possiamo aggiungere nuove attività. Le attività saranno sotto forma di un elenco condelete e checkfunzionalità. Avremo anche funzionalità per mostrare o nascondere le attività completate.
<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>
Passaggio 4: collezioni / task-collection.js
Questo è il luogo in cui creeremo solo una nuova raccolta MongoDB, in modo da poterla utilizzare sia sul lato server che sul lato client.
Tasks = new Mongo.Collection("tasks");
Passaggio 5: server / server.js
Definiremo i metodi per la nostra app lato server. Questi metodi verranno chiamati dal client. In questo file pubblicheremo anche la query del database.
// 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} });
}
});
Passaggio 6: client / todo-app.js
Questo è il file JavaScript del client principale. Questo file può anche essere modificato, ma scriveremo qui tutto il codice lato client. Per prima cosa, ci iscriviamo altaskraccolta pubblicata sul server. Quindi, creiamohelpers per poter gestire la logica dell'app e, infine, definiamo il file events che chiamerà i metodi dal server.
// 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);
}
});
Passaggio 7: distribuzione
Al termine dello sviluppo, possiamo distribuire l'app dalla finestra del prompt dei comandi. Il nome della distribuzione della nostra app saràmy-first-todo-app.
C:\Users\username\Desktop\todo-app>meteor deploy my-first-todo-app
Possiamo aprire il file http://my-first-todo-app.meteor.com/ per iniziare a utilizzare la nostra app.