Backbone sample environment

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.1.7/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js"></script>
<script id="tests_template" type="text/template">    
    <span><%= Name %></span><input type="button" id="btn" value="click" class="btn"/>
</script>

JavaScript

var Test = Backbone.Model.extend();
var TestCollection = Backbone.Collection.extend({model: Test});

var test1 = new Test({ Name: "Test 1", id: 1 });
var test2 = new Test({ Name: "Test 2", id: 2 });
var test3 = new Test({ Name: "Test 3", id: 3 });
var tests = new TestCollection([test1, test2, test3]);

var TestView = Backbone.View.extend({
    tagName: "li",
    template: _.template($("#tests_template").html()),
    initialize: function () {
        _.bindAll(this, 'clickbtn');
    },
    events:
    {
        "click .btn": "clickbtn"
    },
    render: function () {
        $(this.el).append(this.template( this.model.toJSON() ));
        return this;
    },
    clickbtn: function (x, y, z) {
        alert('test ' + this.model.get("Name"));
    }
});

var TestCollectionView = Backbone.View.extend({
    tagName: "ul",
    initialize: function() {
        _.bindAll(this, "renderItem");
    },
    render: function() {
        this.model.each(this.renderItem);
        return this;
    },
    renderItem: function(item) {
        var newItem = new TestView({model: item});
        $(this.el).append(newItem.render().el);
    }
});

var testCollectionView = new TestCollectionView({model: tests});
$("body").append(testCollectionView.render().el);