在backbone.js中获取动态事件ID

时间:2011-09-20 19:25:23

标签: javascript backbone.js

我第一次搞乱了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);

1 个答案:

答案 0 :(得分:8)

骨干中的events使用引擎盖下的jquery。您可以为事件处理程序方法提供eventArgs参数,并从中获取currentTarget,就像任何其他jquery回调一样:

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