Блог

Почему событие срабатывает при нажатии кнопки?

 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> 
    <b>${Name}</b><input type="button" id="btn" value="click" class="btn"/>
    </li> 
</script>

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

events объявление работает с el элементом вашего представления. прямо сейчас у вас есть свой код, напрямую добавляющий вывод html к чему-то, отличному от вашего представления el .

это исправит это:

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