我第一次搞乱了backbone.js,也是MVC的新手..
此示例代码创建一个列表,每个列表都有一个类 updateTotal 的锚。我可以使用点击a.updateTotal':'updateVar'事件成功调用 updateVar 函数
我的问题是如何获得所点击锚点的 ID ?通常在jQuery中我使用了类似$(this).attr(“id”);获取被点击元素的ID。
谢谢!
我的代码....
(function($){
var Item = Backbone.Model.extend({
defaults: {
itemName: 'Item Name',
itemCount: 0
}
});
var List = Backbone.Collection.extend({
model: Item
});
var ListView = Backbone.View.extend({
el: $('body'), // attaches `this.el` to an existing element.
events: {
'click button#addItem': 'addItem',
'click a.updateTotal':'updateVar'
},
initialize: function(){
_.bindAll(this, 'render', 'addItem', 'appendItem', 'updateVar');
this.collection = new List();
this.collection.bind('add',this.appendItem);
this.collection.bind('updateVar',this.updateVar);
this.counter=0; //total added so far
this.render();
},
render: function(){
$(this.el).append('<button id="addItem">Add item</button>');
$(this.el).append('<ul></ul>');
_(this.collection.models).each(function(item){
appendItem(item);
}, this);
},
addItem: function(){
this.counter++;
var item = new Item();
item.set({
itemName: 'Item '+this.counter,
itemID: 'item'+this.counter
});
this.collection.add(item);
},
appendItem: function(item){
$('ul', this.el).append("<li>"+item.get('itemName')+" (<span id=\""+item.get('itemID')+"-counter\">"+item.get('itemCount')+"</span>) <a class=\"updateTotal\" id=\"update-"+item.get('itemID')+"\">[update]</a></li>");
},
updateVar: function(){
//------------------------------------
//I want to get the ID to use here
//------------------------------------
}
});
// **listView instance**: Instantiate main app view.
var listView = new ListView();
})(jQuery);
答案 0 :(得分:8)
骨干中的events
使用引擎盖下的jquery。您可以为事件处理程序方法提供eventArgs
参数,并从中获取currentTarget
,就像任何其他jquery回调一样:
updateVar: function(e){
var clickedEl = $(e.currentTarget);
var id = clickedEl.attr("id");
}