Question

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

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>

这会产生：测试1 测试2

1）当我点击按钮时，如何从该行的集合中获取正确的模型？ 2）当我点击按钮时，如何获得该行的“span”标签？

Answer 1

Backbone是一种组织程序的便捷方法，而不是知道如何导航DOM的替代方法。您的HTML中将有多个id="btn"个条目;这是一个错误。我会做更像id="btn-${cid}"的事情，但你必须弄清楚如何将CID放到那里。

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.
}

Answer 2

这里有很多事情我建议采取不同的做法。例如，您的TestView看起来更像是一个单独的行项目，而不是您将使用tests的集合。此外，您不会传递模型或使用某些内置标记创建功能。

我已将您的代码重新编写为更加惯用的Backbone.js：http://jsfiddle.net/BrianGenisio/YSZWG/12/

但是，这是我提出的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);

这是整个HTML。请注意，我已从正文/模板中删除了ul和li：

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

Backbone js：如何在行项中获得控制权？

2 个答案: