The setup of Backbone:
1 Collection, 3 Models, 1 View for the collection, 1 View per Model.
HTML:
<div id="showit"></div>
Template:
<script id="item-template" type="text/x-handlebars-template">
<a class="item" href="#">{{book.name}}</a>
<br/>
<span>Liked :{{book.likes}}</span><br/>
</script>
Backbone JS:
Book = Backbone.Model.extend({
defaults:{
name : "No Name",
author : "No Name",
likes : 0
}
BookListView = Backbone.View.extend({
collection : BookList,
initialize : function(collection){
this.collection = collection;
this.render();
},
render : function(){
this.collection.each(function(model){
var pustakView = new BookView({model: model});
pustakView.render();
});
}
});
BookView = Backbone.View.extend({
model : Book,
initialize : function(){},
events : {"click a.item": "clicked"},
template : Handlebars.compile($('#item-template').html()),
clicked : function(e){
e.preventDefault();
var likes_count = this.model.get("likes");
this.model.set({likes:++likes_count});
this.renderOne();
},
renderOne : function(){
var output=this.template({'book':this.model.toJSON()});
$(this.el).html(output);
},
render : function(){
var output = this.template({'book':this.model.toJSON()});
$(this.el).append(output);
$('#showit').append($(this.el));
}
});
var book1 = new Book({name:'Awesome Book1',author:"John",likes:10});
var book2 = new Book({name:'Awesome Book2',author:"Dave",likes:20});
var book3 = new Book({name:'Awesome Book3',author:"Bill",likes:30});
BookList = Backbone.Collection.extend({model:Book});
var myBookCollection = new BookList([book1,book2,book3]);
myBookList = new BookListView(myBookCollection);
So here is a snippet of what it generates on page load:
<div id="showit">
<div>
<a class="item" href="#">Awesome Book1</a><br>
<span>Liked:10</span><br>
</div>
...
...
</div>
I am a newbie into world of backbone and trying to implement the basics to apply it into my site. I have referred this site for the above implementation. (Well, not exactly as I have customized it for my needs).
The feature I have been trying to implement is that multiple models with same template will load in 1 Collection, clicking on any element in the rendered view of that model has to give me access to that model so that I can re-render the view of the clicked model only.
The above example does the same where in clicking a hyperlink updates the counter called 'likes' and updates the corresponding model view only. As it can be noticed I have not specified an 'el' attribute for the view of each model and so it will be a 'div'.
My Question is whether this method is an efficient method of updating individual views (when model attributes change due to events) or are there any better methods than this? Also I am not sure if having a view for each loaded model will not cause any memory issues (asuuming I have an infinite scroll implemented which keeps on loading the list of Books)
If the above implementation is good enough, I hope it can help other backbone newbies to get up and running with re-rendering model view when model attributes change.