主干.js 视图事件不执行答案

【问题标题】：backbone.js view event does not execute主干.js 视图事件不执行
【发布时间】：2012-07-18 18:15:11
【问题描述】：

我有如下所示的backbone.js 视图。它工作正常，现在单击表单按钮时单击事件不会执行。控制台中没有错误，也没有显示任何其他明显的原因迹象。

window.FormOptionView = Backbone.View.extend({
    template: _.template($('#test-option').html()),
    render: function (eventName) {
        $('#test1').append(this.template(this.model.toJSON()));
         $('#test2').append(this.template(this.model.toJSON()));
        return this;
    }

});


window.AddTestView = Backbone.View.extend({

    template: _.template($('#test-add').html()),

    initialize: function () {
        this.collection.bind("reset", this.render, this);
        this.render();

    },

    events: {
             "click button": "addTest" 
    },

    addTest: function(event){
        event.preventDefault();
        var test = new Test({
            test1: {
                firstName: $("#test1 option:selected").val(),
                lastName: $("#test1Score").val()
            },
            test2: {
                firstName: $("#test2 option:selected").val(),
                lastName: $("#test2Score").val()
            }
        });

        test.add(result);
        app.navigate("tests", true);

    },

    render: function (eventName) {
        $('#content').html(this.template());
        _.each(this.collection.models, function (test) {
             this.renderSelectBox(test);
        }, this);
        return this;
    },

    renderSelectBox: function (item) {
       var optionView = new FormOptionView({
           model: item
       });
       $(this.el).append(optionView.render().el);
    }
});

相应的 HTML

        <script type="text/template" id="test-option">
        <option><%= firstName %> <%= lastName %></option>
    </script>

    <script type="text/template" id="test-add">

                <form id="addTest" action="#">
                        <label for="test1">Test1:</label>

                        <select id="test1">
                            <option></option>
                        </select>

                        <label for="test1Score">Score:</label>

                        <input id="test1Score" type="number" />



                        <label for="test2">Test 2:</label>

                        <select id="test2">
                            <option></option>
                        </select>

                        <label for="test2Score">Score:</label>

                        <input id="test2Score" type="number" />


                        <button id="add">Add</button>
                    </form>

           </script>

【问题讨论】：

我们可以看到相应的 HTML 吗？
尝试指定按钮的 id - "click .add": "addTest"。您的根元素中至少似乎有一个按钮。

标签： javascript events backbone.js

【解决方案1】：

没有看到相应的 HTML，我最好的猜测是您的 <button> 超出了您的视图范围。点击事件仅附加到视图根元素的子元素。

【讨论】：

刚刚发现views el标签对应的是一堆空的。不知道为什么，但一个简单的 el: $('#content') 设法解决了这个问题。谢谢

【解决方案2】：

刚刚发现视图el标签对应一堆空的<div>s。不知道为什么，但一个简单的el: $('#content') 设法解决了这个问题。谢谢

【讨论】：

【解决方案3】：

正如您已经发现的那样，您的问题是您的视图没有正确处理其el。

当您的视图被渲染时，Backbone 通过在视图的this.el 上使用jQuery 的delegate 来连接事件。

如果您没有显式设置el（通过构造函数为new V({ el: ... })，在视图的定义中为el: ...，或通过调用setElement），那么el 将使用各种构造查看属性as noted in the documentation；默认的el 只是一个简单的<div>。这就是你空的<div>s 的来源。

你正在这样做：

render: function (eventName) {
    $('#content').html(this.template());
    _.each(this.collection.models, function (test) {
         this.renderSelectBox(test);
    }, this);
    return this;
}

在其他地方你可能正在做一个简单的add_test_view.render()。结果是事件delegate 绑定到视图的el（一个空的<div>）并且el 永远不会添加到DOM；如果你有 delegate 绑定到不在 DOM 中的东西，那么你永远不会收到任何事件。

如果您在视图定义中使用el: '#content'，那么Backbone 将使用#content 作为您的el，您的视图看起来更像这样：

el: '#content',
//...
render: function (eventName) {
    this.$el.html(this.template());
    this.collection.each(function(test) {
        this.renderSelectBox(test);
    }, this);
    return this;
},
renderSelectBox: function (item) {
    var optionView = new FormOptionView({
        model: item
    });
    this.$el.append(optionView.render().el);
}

请注意，我切换到this.collection.each，主干集合具有various Underscore methods mixed in，因此您不必手动访问collection.models；我也切换到this.$el，因为视图已经有一个缓存的 jQuery 版本的this.el。

【讨论】：