Simple todo app with meteor
0 likes1,465 views
Meteor is a full-stack JavaScript framework that allows developers to build web applications quickly using a single programming language. It includes a development environment to build the app, a database (MongoDB), and communication protocols (DDP) to connect the client and server. The document demonstrates a simple Todo app built with Meteor that allows users to create, update, and mark tasks as complete. Templates are used to display tasks and counts, while events and helpers interact with the Tasks collection in MongoDB to add, update, and filter data.
![Template.Task.events({
"click [name=is_done]": function(e, tmpl){
var id = this._id;
var isDone = tmpl.find('input').checked;
Todos.update({_id: id}, {$set: { is_done: isDone}});
}
});
Template.CreateTask.events({
'submit form': function(e, tmpl){
e.preventDefault();
var subject = tmpl.find('input').value;
Todos.insert({subject: subject, created_at: new Date, is_done: false});
var form = tmpl.find('form');
form.reset();
}
});
}](https://image.slidesharecdn.com/simpletodoappwithmeteor-140415035352-phpapp02/85/Simple-todo-app-with-meteor-9-320.jpg)
Simple todo app with meteor
- 1. TodoAppwith Meteor » Long Nguyen » @vangnol
- 2. Whatis Meteor? Meteor is a framework for building incredible web application. Meteor helps you build complex web application but in minimal amount of time. It's full- stack framework. On the server it runs on Nodejs, which means Meteor written in Javascript. Meteor has out of the box integration with MongoDB database. Meteor uses DDP Protocal to communicate between client and server.
- 3. Setup » MacOS or Ubuntu curl https://install.meteor.com/ | sh » Windows Go get a Mac or a Ubuntu laptop
- 4. Demo Simple Todo App with Meteor ♡♡♡
- 5. task.html <head> <title>Simple Todo App</title> </head> <body> <h1>Awesome Todo App</h1> <hr/> <div class="container"> {{> CreateTask}} {{> ListTasks}} {{> CompleteCounter}} </div> </body> <template name="ListTasks"> <ul> {{#each tasks}} <li class="task {{doneClass}}">{{> Task}}</li> {{/each}} </ul> </template>
- 6. <template name="Task"> <input type="checkbox" name="is_done" {{isDoneChecked}} /> {{subject}} </template> <template name="CreateTask"> <form class="create-task" > <input type="text" placeholder="Creating new task...!" /> </form> </template> <template name="CompleteCounter"> <h3>{{completeTask}} / {{totalTasks}} tasks completed</h3> </template>
- 7. task.css .task{ font-size: 20px; background-color: #EBEBEB; padding: 10px; margin-bottom: 2px; } .done{ text-decoration: line-through; }
- 8. task.js Todos = new Meteor.Collection('todos'); if(Meteor.isClient){ Template.ListTasks.helpers({ tasks: function(){ return Todos.find(); }, doneClass: function(){ return this.is_done ? 'done' : ''; } }); Template.Task.helpers({ isDoneChecked: function(){ return this.is_done ? 'checked' : '' } });
- 9. Template.Task.events({ "click [name=is_done]": function(e, tmpl){ var id = this._id; var isDone = tmpl.find('input').checked; Todos.update({_id: id}, {$set: { is_done: isDone}}); } }); Template.CreateTask.events({ 'submit form': function(e, tmpl){ e.preventDefault(); var subject = tmpl.find('input').value; Todos.insert({subject: subject, created_at: new Date, is_done: false}); var form = tmpl.find('form'); form.reset(); } }); }
- 10. Template.CompleteCounter.helpers({ completeTask: function(){ return Todos.find({is_done: true}).count(); }, totalTasks: function(){ return Todos.find({}).count(); } }); } if(Meteor.isServer){ }
- 11. References » MeteorHacks » Best Learning Resources » Meteor Packages » Why Meteor will kill Ruby on Rails » Meteor Won’t Kill Rails Anytime Soon » How to Learn JavaScript Properly
- 12. Thankyou!