骨干点击事件在集合视图中不起作用
[英]backbone click event not working in collection view
问题描述
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 
我是刚接触背骨的人，（Backbone.js 1.0.0）这是我的示例HTML页面，其中我使用视图和模型，我有一个按钮和文本字段，并且每次单击该按钮时，我需要显示文本字段的内容为'<li>'标记，这是我的html页面
<!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 个解决方案
解决方案1
1 已采纳 2014-03-14 13:20:02
I think you need to first understand how events work in backbone.js views. 我认为您需要首先了解事件如何在ribs.js视图中工作。 When you specify an events hash in a view backbone delegates these events to the view's el . 在视图中指定事件哈希时，主干将这些事件委托给视图的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和集合视图进行了轻微修改，则应触发事件。
HTML 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 这是指向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. 这应该可以使您当前的代码正常工作，但是一般而言，您可能希望从DOM渲染集合视图，并在渲染之后附加它。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.