BB: Working with BB StickIt

http://nytimes.github.io/backbone.stickit/

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.stickit/0.8.0/backbone.stickit.min.js"></script>
  <!-- Hmtl -->
<html>    
<head> 
<link rel="stylesheet" type="text/css" href="style.css">   
</head>    
<body>    
<div id="todoapp">
      <table style="width:75%;" id="tblinput">
         <thead>
            <h1>My Todos</h3>
         <thead>
            <tr>
               <td>Task Name:</td>
               <td> 
                  <input type="text" id="task_name" placeholder="Enter the task name" /> 
               </td>
            </tr>
            <tr>
               <td>Description:</td>
               <td> 
                  <input type="text"  id="task_desc" placeholder="Enter the Task Description"> 
               </td>
            </tr>
            <td> 
            </td>
            <td> 
               <button id="btnadd">Add</button> 
               <button id="btnclear">Clear</button> 
            </td>
            </tr> 
      </table>     
    </div>
     <div id="dvcontainer">heeloooo</div>

<script src="lib/jquery/dist/jquery.js"></script>
<script src="lib/underscore/underscore.js"></script>
<script src="lib/backbone/backbone.js"></script>  
<script  type = "text/javascript"  src="index.js"></script>
</body>
</html>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,500);

body {
    font-family: Roboto;
    color: #191919;
}

a {
    color: #191919;
}

form fieldset {
	margin: 0 0 20px 0;
	font-size: 14px;
	}
form fieldset.form-actions {
	margin: 0;
	}
form fieldset label {
	display: block;
	margin: 0 0 5px 0;
	font-weight: bold;
	}
form fieldset input.form-text {
	display: block;
	width: 50%;
	padding: 5px;
	font-size: 14px;
	border: 1px solid #ddd;
	background: #f5f5f5;
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.05);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	}
form fieldset input.form-text:focus {
	border: 1px solid #ccc;
	background: #fff;
	}
form fieldset p.form-help {
	margin: 5px 0 0 0;
	font-size: 12px;
	color: #999;
	}
form input[type="submit"] {
	margin: 0;
	padding: 5px 10px;
	font-size: 12px;	
	font-weight: bold;
	border: 1px solid #ccc;
	background: #eee;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	}
form input[type="submit"]:hover,
form input[type="submit"]:focus {
	border: 1px solid #bbb;
	background: #e5e5e5;
	}
form input[type="submit"]:active {
	border: 1px solid #ccc;
	background: #eee;
	}	

footer {
    background: black;
    color: white;
    padding: 16px;
    width: 100%;
}

JavaScript

//Define a global var task_id as 0

var task_id = 0 ;

//Define your Model, Task Model 

var Task = Backbone.Model.extend({ 
    defaults: { 
    taskid: 0 ,
		taskName:"" ,
		taskDesc:"" 
		}
});

//Define your Collection, TasksCollection with Model as Task 

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

//Define your View, TaskRecordsView with events buttons add(addTask),delete(deleteTask) and clear(clearInput) 

var TaskRecordsView = Backbone.View.extend({ 
//The body element in which all elements are displayed 
el: 'body', 
//Events for the elements on the page. 
events:{ 
    'click button#btnadd': 'addTask', 
    'click button#btnclear': 'clearInput',
	'click button#delete': 'deleteTask'
},

//Render function to display collection collection in the Table
  initialize: function(){
    this.collection.on("add", this.render);   
    var dvcontainer12 = $(this.el).find('#dvcontainer');   
  },

//Render function to display collection collection in the Table 
render: function () { 
    alert("have you tried..");
    var dvcontainer1 = $(this.el).find('#dvcontainer'); 
    _.each(this.collection.models, function (m, i, l) { 
            alert("helloooo");
        }); 
    dvcontainer1.html('yes you tried');
}, 

//Function executed on the button clieck 
addTask: function () { 
    var newTask = new Task(); 	
	task_id = task_id+1;
    newTask.set('taskid',  task_id); 
    newTask.set('taskName', $("#task_name").val()); 
    newTask.set('taskDesc', $("#task_desc").val());    
    this.collection.add(newTask); 	
}, 

//Function to clear all textboxes. 
clearInput: function () { 
    //Clear all Textboxes 
    $("#tblinput input").val(''); 
} ,
//Function to delete all textboxes. 
deleteTask: function (btnname) { 
    //Clear all Textboxes 
    $("#tblinput input").val(''); 
} 
});


var taskCollection = new TasksCollection();
var tasksView = new TaskRecordsView({ 
    collection:taskCollection 
});