Backbone js: How to get control in row item?

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

TestView = Backbone.View.extend({
    initialize: function () {
        this.render();
    },
    events:
    {
        "click .btn": "clickbtn"
    },
    render: function () {
        $("#tests_template").tmpl(tests.toJSON()).appendTo("#tests_list");
        this.delegateEvents();
        return this;
    },
    clickbtn: function () {
        alert('test');
    }
});

var testView = new TestView();

<script id="tests_template" type="text/x-jquery-tmpl">    
    <li> 
    <span>${Name}</span><input type="button" id="btn" value="click" class="btn"/>
    </li> 
</script>

<ul id="tests_list">
</ul>

This produces: Test 1 Test 2

1) When I click the button, how do I get the correct model from the collection for that row? 2) When I click the button, how do I get the "span" tag for that row?

Backbone is a convenience method for organizing your program, not a replacement for knowing how to navigate a DOM. You will have multiple id="btn" entries in your HTML; this is an error. I would do something more like id="btn-${cid}", but you'll have to figure out how to get the CID into there.

clickbtn: function(ev) {
    var span = $('span', $(ev.currentTarget).closest('li'));
    var cid = $(ev.currentTarget).attr('id').replace(/^btn-/, '');
    var themodel = @collection.getByCid(cid);
    // ... More here.
}

There are a lot of things going on here that I would suggest doing differently. For one, your TestView looks more like an individual line item instead of a collection of them that you would be working with tests. In addition, you are not passing in models or using some of the built-in tag creation capabilities.

I have re-written your code to be more idiomatic Backbone.js here: http://jsfiddle.net/BrianGenisio/YSZWG/12/

But, here is the Javascript I came up with:

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);

And here is the entire HTML. Note that I have dropped the ul and li from the body/template:

<script id="tests_template" type="text/template">    
    <span><%= Name %></span><input type="button" id="btn" value="click" class="btn"/>
</script>