<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<script src="http://documentcloud.github.io/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.io/backbone/backbone-min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<title>ToDo List using BackboneJs</title>
</head>
<body>
<script type="text/template" id="task_view_template">
<input type="text" id="title"/>
<button class="btnUpdateTodo">Update</button>
<button class="btnDeleteTodo">X</button>
</script>
<script type="text/template" id="task_list_template">
<h3>Tasks</h3>
<p>New task: <input type="text" name="txtTaskName"/>
<button class="btnAdd">Add</button></p>
<ul></ul>
</script>
<div id="task_list_1"></div>
<div id="task_list_2"></div>
<script type="text/javascript">
TaskModel = Backbone.Model.extend({ urlRoot:'/api/tasks'});
TaskListModel = Backbone.Collection.extend({ url: '/api/tasks', model: TaskModel });
TaskListView = Backbone.View.extend( {
initialize: function(){
_.bindAll(this, 'render');
this.taskList = new TaskListModel();
var thisView = this;
this.taskList.fetch( {success: function(){
console.log(thisView.taskList.models);
thisView.render();
}} );
this.on('delete-task', function(idx){
thisView.render();
});
},
render: function(){
var template = _.template( $("#task_list_template").html(), {} );
this.$el.html( template );
var thisView = this;
this.taskList.models.forEach(function(ele,idx){
ele.idx = idx;
console.log(ele);
console.log('title:::::'+ele.get('title'));
thisView.$el.find('ul').append(new TaskView({task: ele, parentView: thisView }).el);
});
},
events: {
"click button.btnAdd" : "addTask",
"click button.bntDeleteTodo" : "deleteTask"
},
addTask: function(){
var taskModel = new TaskModel({title: this.$el.find('input[name="txtTaskName"]').val() });
taskModel.save();
this.taskList.add(taskModel);
this.render();
}
});
TaskView = Backbone.View.extend({
initialize: function(v){
this.task = v.task;
this.parentView = v.parentView;
_.bindAll(this, 'render', 'deleteTask', 'updateTask');
this.render();
},
render: function(){
var taskJson = this.task.toJSON();
var template = _.template( $("#task_view_template").html(), {task: taskJson } );
this.$el.html( template );
this.$el.find('.btnDeleteTodo').data('index', taskJson.idx);
this.$el.find('#title').val(taskJson.title);
},
events: {
"click button.btnDeleteTodo" : "deleteTask",
"click button.btnUpdateTodo" : "updateTask"
},
updateTask: function(evt){
this.task.set('title', this.$el.find('#title').val());
this.task.save();
var idx = $(evt.target).data('index');
this.render();
},
deleteTask: function(evt){
this.task.destroy();
var idx = $(evt.target).data('index');
this.parentView.trigger('delete-task', idx);
this.render();
}
});
$(document).ready(function(){
var taskListView = new TaskListView({ el: $("#task_list_1") });
});
</script>
</body>
</html>