2011-09-20 94 views
3

我与Backbone.js的插科打诨,第一次和我也是新的MVC动态事件ID ..获取Backbone.js的

此示例代码创建一个列表,每个列表具有与锚更新总数。我可以成功调用使用点击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); 

回答

8

引擎盖下的骨干events使用jQuery。你可以提供一个eventArgs参数事件处理程序的方法,并从它那里得到的currentTarget,任何其他jQuery的回调会:

updateVar: function(e){ 
    var clickedEl = $(e.currentTarget); 
    var id = clickedEl.attr("id"); 
} 
+0

它完美地工作。感谢您的快速回复并提供帮助! – Matt

+0

是啊..完美.. !! – Gowri