todo list using handlebar

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>ToDo</title>
<link rel=”stylesheet” href=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”>
<style>
body {
padding-top: 100px;
}
</style>
</head>
<body>

 

</div>
</div>
</div>

{{title}}

 
Your Next Task

Add Task

http://lodash.min.js
http://jquery.min.js
http://handlebars.min.js
http://backbone-min.js

var TaskFormView = Backbone.View.extend({
initialize: function () {
this.render();
},
render: function () {
var template = Handlebars.compile($(“#taskform”).html());
this.$el.html(template());
},
events: {
‘click button’: ‘addTask’
},
addTask: function (e) {
e.preventDefault();
var title = this.$el.find(“.task”).val();
if(title) {
var t = new Task({title: title});
this.collection.add(t);
this.$el.find(“.task”).val(”);
}
}
});

var Task = Backbone.Model.extend({
defaults: {
completed: 0,
title: “”
},
});

var TaskCollection = Backbone.Collection.extend({
model: Task,
});

var TaskView = Backbone.View.extend({
initialize: function () {
this.render();

},
render: function () {
var template = Handlebars.compile($(“#task”).html());
this.$el.html(template(this.model.toJSON()));
}
});

var TaskCollectionView = Backbone.View.extend({
initialize: function () {
this.render();
_.bindAll(this,”render”,”renderLast”);
this.collection.bind(“add”,this.renderLast);
},
render: function () {
var template = Handlebars.compile($(“#tasks”).html());
this.$el.html(template());
this.collection.each(function(item){
//console.log(item);
var tv = new TaskView({model:item});
this.$el.find(“.tasks”).append(tv.el);

},this)
},
renderLast:function(){
var lasttask = this.collection.last();
console.log(lasttask);
var tv = new TaskView({model:lasttask});
this.$el.find(“.tasks”).append(tv.el);
}
});

var t1 = new Task({title:”Breakfast at 8″});
var t2 = new Task({title:”Go to the office at 10″});
var t3 = new Task({title:”Meet client X at 11″});
var t4 = new Task({title:”Send tasks report to client2 at 14″});
var t5 = new Task({title:”Meeting with an old friend at 17″});
var t6 = new Task({title:”Dinner at 22″});

var tasks = new TaskCollection([t1,t2,t3,t4,t5,t6]);
var tasksview = new TaskCollectionView({collection:tasks});
var tfv = new TaskFormView({collection:tasks});
$(“#result”).append(tfv.el);
$(“#result”).append(tasksview.el);

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s