backbone.js todo app

by sumit_skr

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.0/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css">
<head>
	<meta charset="UTF-8">
	<title>Backbone Tutorial App</title>
</head>
<body>
	<div class="container">
		<h1>Backbone Tutorial App</h1>

		<table class="table">
			<thead>
				<tr>
					<th>Author</th>
					<th>Title</th>
					<th>URL</th>
					<th>Action</th>
				</tr>
				<tr>
					<td><input class="form-control author-input"></td>
					<td><input class="form-control title-input"></td>
					<td><input class="form-control url-input"></td>
					<td><button class="btn btn-primary add-blog">Add</button></td>
				</tr>
			</thead>
			<tbody class="blogs-list"></tbody>
		</table>
	</div>

	<script type="text/template" class="blogs-list-template">
	<td><span class="author"><%= author %></span></td>
	<td><span class="title"><%= title %></span></td>
	<td><span class="url"><%= url %></span></td>
	<td>
  	<button class="btn btn-warning edit-blog">Edit</button> 
  	<button class="btn btn-danger delete-blog">Delete</button>
    <button class="btn btn-success update-blog" style="display:none">Update</button> 
    <button class="btn btn-danger cancel" style="display:none">Cancel</button>
  </td>
	</script>

</body>

JavaScript

var Blog = Backbone.Model.extend({});

var Blogs = Backbone.Collection.extend({});

var blogs = new Blogs();

var BlogView = Backbone.View.extend({
	//model: new Blog(),
  tagName: 'tr',
  //initialize: function(){
  template: _.template($('.blogs-list-template').html() ),
  //},
  render: function() {
  console.log(this.$el);
  	this.$el.html(this.template(this.model.toJSON()));
    return this;
  }
})

var BlogsView = Backbone.View.extend({
	el: $('.table'),
  model: blogs,
  initialize: function(){
  	this.model.on('add', this.render, this);
    
    //this.collection = new Blogs(blogs);
  },
  events: {
  	"click .add-blog": 'adduser'
  },
  adduser: function(){
  	 var blog = new Blog({
        author: $('.author-input').val(),
        title: $('.title-input').val(),
        url: $('.url-input').val()
      });
     	$('.author-input').val('');
      $('.title-input').val('');
      $('.url-input').val('');
      blogs.add(blog);
      //this.render();
  },
  render: function(){
  	this.$el.find('.blogs-list').html('');
    _.each(this.model.toArray(), function(blog){
    
    var tempview = new BlogView({
        model: blog
      });
    $('.blogs-list').append(tempview.render().$el)
    });
    return this;
  }
});

var blogsview = new BlogsView();