骨干點擊事件在集合視圖中不起作用
[英]backbone click event not working in collection view
問題描述
我是剛接觸背骨的人，（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>
我第一次調用集合視圖時它正在工作，但是當我單擊按鈕時，什么也沒有發生，任何幫助將不勝感激
1 個解決方案
解決方案1
1 已采納 2014-03-14 13:20:02
我認為您需要首先了解事件如何在ribs.js視圖中工作。 在視圖中指定事件哈希時，主干將這些事件委托給視圖的el 。 在您的情況下，由於按鈕不是集合視圖的后代，因此不會觸發事件。
例如，如果您的HTML和集合視圖進行了輕微修改，則應觸發事件。
HTML
<div id="carCnt">
<input type="text" id="txt1">
<button class="btn1">Save</button>
<ul id="carList"></ul>
</div>
視圖
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..
}
});
這是指向jsbin的鏈接
這應該可以使您當前的代碼正常工作，但是一般而言，您可能希望從DOM渲染集合視圖，並在渲染之后附加它。
骨干視圖點擊事件未觸發
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.