backbone click event not working in collection view
Question
i am very new to back bone,( Backbone.js 1.0.0) this is my sample html page where iam using views and model ,i have a button and text field,and every time i click on that button ,i need to display the content of the text field to '<li> ' tag,this is my html page
<!DOCTYPE html>
<html>
<head>
<title>Backbone Application</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/underscore.js" type="text/javascript"></script>
<script src="js/backbone.js" type="text/javascript"></script>
</head>
<body>
<input type="text" id="txt1">
<button class="btn1">Save</button>
</body>
<script>
var Car = Backbone.Model.extend({
initialize: function(){
console.log('car model created...');
} ,
defaults: {
name: 'alto'
}
});
// A List of People
var CarCollection = Backbone.Collection.extend({
model: Car,
initialize: function(){
console.log('Car Collection created...');
}
});
carView = Backbone.View.extend({
tagName: 'li',
initialize: function() {
console.log('Car view created...');
},
render: function( model ) {
this.$el.html(this.model.get('name'));
return this; // returning this from render method..
console.log('rendered')
},
});
CarCollectionView = Backbone.View.extend({
tagName: 'ul',
initialize: function() {
console.log('Car Collection View created');
this.collection.on("add", this.render, this);
},
events: {
'click .btn1':'getcar'
},
getcar: function() {
console.log('Artist model changed...'+$('.nameField').val());
var car_name = $('#txt1').val();
this.collection.add({name:car_name} );
},
render: function(){
this.collection.each(function(car){
var carView1= new carView({ model: car });
this.$el.append(carView1.render().el); // calling render method manually..
}, this);
return this; // returning this for chaining..
}
});
var carCollection = new CarCollection([
{
name: 'maruthi'
}]);
var carCollectionView = new CarCollectionView({ collection: carCollection });
$(document.body).append(carCollectionView.render().el);
</script>
</html>
it was working first time when i call the collection view ,but i when i click the button,nothing happens,any help will be appreciated
1 answers
solution1
1 ACCPTED 2014-03-14 13:20:02
I think you need to first understand how events work in backbone.js views. When you specify an events hash in a view backbone delegates these events to the view's el . In your case since the button isn't a descendant of your collection view's el it's events aren't being triggered.
For example if your HTML and collection view were slightly modified your event should fire.
HTML
<div id="carCnt">
<input type="text" id="txt1">
<button class="btn1">Save</button>
<ul id="carList"></ul>
</div>
View
CarCollectionView = Backbone.View.extend({
el: '#carCnt',
initialize: function() {
console.log('Car Collection View created');
this.collection.on("add", this.render, this);
},
events: {
'click .btn1':'getcar'
},
getcar: function() {
console.log('Artist model changed...'+$('.nameField').val());
var car_name = $('#txt1').val();
this.collection.add({name:car_name} );
},
render: function(){
//clear list first
this.$el.find('#carList').empty();
this.collection.each(function(car){
var carView1= new carView({ model: car });
this.$el.find('#carList').append(carView1.render().el); // calling render method manually..
}, this);
return this; // returning this for chaining..
}
});
And here's a link to a jsbin
This should get your current code working however in general you might want to render your collection view off of the DOM and attach it after it is rendered.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.