Backbone.js 主干事件不触发&；关于框架使用情况的一般性反馈

我对backbone.js很陌生，我有点挣扎。我找到了一种从服务器（json格式）成功地将数据发送到屏幕上的方法，但我这样做是否正确/最佳

所有我的视图都设置了this.el，但是视图的事件没有触发（）。。。前进的最佳途径是什么

代码如下：

var surveyUrl = "/api/Survey?format=json&callback=?";

AnswerOption = Backbone.Model.extend({});

AnswerOptionView = Backbone.View.extend({

    initialize: function () {
        _.bindAll(this, 'updateCheckedState');
    },

    events: {
        "click .answerOptionControl": "updateCheckedState" //still noy firing :-(
    },

    render: function() {
        this.model.get('answerOption').questionChoiceType = this.model.get('questionChoiceType');
        var template = _.template($("#questionAnswerOptionTemplate").html(), this.model.get('answerOption'));

        $(this.el).html(template);
        return this;
    },

    updateCheckedState: function(e) {
        alert("Here is my event origin: " + e.target)
    }
});

Question = Backbone.Model.extend({});

QuestionView = Backbone.View.extend({
    render: function() {

        var template = _.template($("#questionTemplate").html(), this.model.get('question'));
        $(this.el).html(template);

        /*validator code removed*/

        for (var i = 0; i < this.model.get('question').answerOptions.length; i++) {
            var qModel = new AnswerOption({
                answerOption: this.model.get('question').answerOptions[i]
            });

            var view = new AnswerOptionView({ model: qModel });

            this.$('fieldset').append(view.render().el.innerHTML);
        }

        return this;
    }
});

Survey = Backbone.Model.extend({
    url: function () { return this.get("id") ? surveyUrl + '/' + this.get("id") : surveyUrl; }
});

SurveyList = Backbone.Collection.extend({
    model: Survey,
    url: surveyUrl
});

SurveyView = Backbone.View.extend({
    initialize: function () {
        _.bindAll(this, 'render');
        this.model.bind('refresh', this.render);
        this.model.bind('change', this.render);
    },

    // Re-render the contents
    render: function () {
        for (var i = 0; i < this.model.attributes[0].questions.length; i++) {

            var view = new QuestionView();
            var qModel = new Question({
                question: this.model.attributes[0].questions[i]
            });

            view.model = qModel;
            $(this.el).append(view.render().el.innerHTML);
        }

        this.el.trigger('create');
    }
});

$(document).ready(
function () {
    aSurvey = new Survey({ Id: 1 });
    window.App = new SurveyView({ model: aSurvey, el: $("#questions") });
    aSurvey.fetch();
});

---

由于附加子视图的方式，它不起作用

this.$('fieldset').append(view.render().el.innerHTML);

在主干视图中，事件处理的工作方式是将事件（而不是附加到元素）附加到视图的根元素，然后将其委托给子元素。在您的情况下，不是将子视图的根元素附加到父视图，而是将其内容附加到事件处理中，因为绑定事件的元素永远不会将其添加到DOM中

this.$('fieldset').append(view.render().el);

删除

innerHTML

属性，它将再次工作。如果在实例化主干视图时不希望有包装元素，则始终可以传递要声明为

el

options属性的元素

var view = new AnswerOptionView({ model: qModel, el: this.$('fieldset') }).render();

---

这样，AnswerOptinView将声明fieldset元素并将事件绑定到它。

虽然我目前没有时间查看您的代码，但您可能会发现这很有帮助。我相信作者也是StackOverflow的定期撰稿人。嗨，科林，谢谢你的链接。好文章。我更改并简化了代码，但仍然存在事件问题。。。

this.$('fieldset').append(view.render().el);

var view = new AnswerOptionView({ model: qModel, el: this.$('fieldset') }).render();