backbone.js: how to get the model of the clicked html element

1.html

<script id="item-template" type="text/x-jquery-tmpl">
    <li><a href="#">${name}</a></li>
</script>

1.js

Item = Backbone.Model.extend({});
ItemCollection = Backbone.Collection.extend({
    model: Item
});

ItemListView = Backbone.View.extend({
    tagName: "ul",
    events: {
        "click a": "clicked"
    },
    
    clicked: function(e){
        e.preventDefault();
        var item = // ??? how do we get the item?!
        var name = item.get("name");
        alert(name);
    },
    
    render: function(){
        var template = $("#item-template");
        var el = $(this.el);
        this.collection.each(function(model){
            var html = template.tmpl(model.toJSON());
            el.append(html);
        });
    }
});

var items = new ItemCollection([
    {id: 1, name: "item 1"},
    {id: 2, name: "item 2"},
    {id: 3, name: "item 3"}
]);

var view = new ItemListView({collection: items});
view.render();
$("#showIt").html(view.el);

2.html

<script id="item-template" type="text/x-jquery-tmpl">
    <li><a href="#" data-id="${id}">${name}</a></li>
</script>

2.js

Item = Backbone.Model.extend({});
ItemCollection = Backbone.Collection.extend({
    model: Item
});

ItemListView = Backbone.View.extend({
    tagName: "ul",
    events: {
        "click a": "clicked"
    },
    
    clicked: function(e){
        e.preventDefault();
        var id = $(e.currentTarget).data("id");
        var item = this.collection.get(id);
        var name = item.get("name");
        alert(name);
    },
    
    render: function(){
        var template = $("#item-template");
        var el = $(this.el);
        this.collection.each(function(model){
            var html = template.tmpl(model.toJSON());
            el.append(html);
        });
    }
});

var items = new ItemCollection([
    {id: 1, name: "item 1"},
    {id: 2, name: "item 2"},
    {id: 3, name: "item 3"}
]);

var view = new ItemListView({collection: items});
view.render();
$("#showIt").html(view.el);

3.html

<script id="item-template" type="text/x-jquery-tmpl">
    <a href="#">${name}</a>
</script>

3.js

Item = Backbone.Model.extend({});
ItemCollection = Backbone.Collection.extend({
    model: Item
});

ItemListView = Backbone.View.extend({
    tagName: "ul",
    
    initialize: function(){
        _.bindAll(this, "renderItem");
    },
    
    renderItem: function(model){
        var itemView = new ItemView({model: model});
        itemView.render();
        $(this.el).append(itemView.el);
    },
    
    render: function(){
        this.collection.each(this.renderItem);
    }
});

ItemView = Backbone.View.extend({
    tagName: "li",
    events: {
        "click a": "clicked"
    },
    
    clicked: function(e){
        e.preventDefault();
        var name = this.model.get("name");
        alert(name);
    },

    render: function(){
        var template = $("#item-template");
        var html = template.tmpl(this.model.toJSON());
        $(this.el).append(html);
    }  
});

var items = new ItemCollection([
    {id: 1, name: "item 1"},
    {id: 2, name: "item 2"},
    {id: 3, name: "item 3"}
]);

var view = new ItemListView({collection: items});
view.render();
$("#showIt").html(view.el);