Simple todo app with meteor
Upcoming SlideShare
Loading in...5
×
 

Simple todo app with meteor

on

  • 246 views

 

Statistics

Views

Total Views
246
Slideshare-icon Views on SlideShare
242
Embed Views
4

Actions

Likes
0
Downloads
1
Comments
0

1 Embed 4

http://www.slideee.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Simple todo app with meteor Simple todo app with meteor Presentation Transcript

    • TodoAppwith Meteor » Long Nguyen » @vangnol
    • 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.
    • Setup » MacOS or Ubuntu curl https://install.meteor.com/ | sh » Windows Go get a Mac or a Ubuntu laptop
    • Demo Simple Todo App with Meteor ♡♡♡
    • 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>
    • <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>
    • task.css .task{ font-size: 20px; background-color: #EBEBEB; padding: 10px; margin-bottom: 2px; } .done{ text-decoration: line-through; }
    • 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' : '' } });
    • 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(); } }); }
    • Template.CompleteCounter.helpers({ completeTask: function(){ return Todos.find({is_done: true}).count(); }, totalTasks: function(){ return Todos.find({}).count(); } }); } if(Meteor.isServer){ }
    • 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
    • Thankyou!