Reputation: 13
This is TodoView. I have added return this in render function of TodoView
var TodoView=Backbone.View.extend({
el:'h3',
tagName:'article',
id:'todo-view',
className:'todo',
template:_.template('<h3 class="<%=status%>">'+'<input type=checkbox '+'<%if(status==="complete") print("checked")%>/>'+'<%=description %></h3>'),
events:{
"click h3":"alertStatus",
"change input":"toggleStatus"
},
alertStatus:function(e)
{
console.log('Hey you clicked TodoItem !');
},
toggleStatus:function()
{
this.model.toggleStatus();
},
initialize:function()
{
this.model.on('change',this.render,this);
this.model.on('destroy',this.remove,this);
},
render:function()
{
var attributes=this.model.toJSON();
this.$el.html(this.template(attributes));
this.$el.delegate('h3','click',this.alertStatus);
return this;
},
remove:function()
{
this.$el.remove();
}
});
This is view of the collection.
var TodoListView=Backbone.View.extend({
el:'h3',
Here forEach is not fetching all the models. Only first model is visible in div. I want to show all the models in the view.
render:function()
{
this.collection.forEach(this.addOne,this);
return this;
},
In this addOne function, The models are logging out on console if i use $el.html(), but models are not visible on the view; (on the browser)
addOne:function(todoItem)
{
var todoView=new TodoView({model:todoItem});
this.$el.append(todoView.render().$el.html());
},
initialize:function()
{
this.collection.on('change',this.addOne,this);
this.collection.on('add',this.addOne,this);
}
});
var todoListView=new TodoListView({collection:todoList});
todoListView.render();
console.log(todoListView.el);
Upvotes: 0
Views: 1179