当我使用 Backbone 触发事件时没有任何反应答案

【问题标题】：Nothing happens when I trigger event with Backbone当我使用 Backbone 触发事件时没有任何反应
【发布时间】：2012-06-07 12:51:34
【问题描述】：

我尝试开始使用 Backbone。我有以下JS：

var Question = Backbone.Model.extend({
    defaults: function() {
        return {
          title: "Enter your question",
          type: "smallTextField",
          editMode: true
        };
      },

    initialize: function() {
          if (!this.get("title")) {
            this.set({"title": this.defaults.title});
          }
        },   

    toggleEditMode: function() {
        !this.get("editMode");
    },

    clear: function() {
        this.destroy();
      }         

});

收藏：

var Questions = Backbone.Collection.extend({
    initialize: function(models, options) {
        this.bind("add", options.view.addQuestionView);
    }
});

应用视图：

var AppView = Backbone.View.extend({
    el: $("body"),

    initialize: function () {
        this.questions = new Questions( null, { view: this });
    },

    events: {
        "click #addQuestion":  "addQuestionModel"
    },

    addQuestionModel: function() {
            var model = new Question();
            this.questions.add(model);
    },

    addQuestionView: function(model) {
        $("#questionBox").append("<div>" + model.get('title') + "</div>");  
    },

}); 

    var appview = new AppView;

以及以下 HTML：

<div id="questionBox"></div>
<a href="#" id="addQuestion">Add question</a>

在我的 Jasmine 规范中，我触发了 $("#addQuestion").click();

但是 - 当我运行测试时没有任何反应。例如。似乎没有函数绑定到#addQuestion 的点击事件。

我猜有些地方做错了，我根本不知道是什么。

有什么想法吗？

【问题讨论】：

为我工作：jsfiddle.net/fguillen/6dT6N 我希望你的 jasmine 中有一个正确的 HTML，我的意思是你的 a#addQuestion 被正确地放置在一个 body 标记中，所以 events 选择器可以匹配它。
我打算编辑您的问题以删除所有添加的代码只不过是噪音，我们是否需要这里的模型和集合实现？

标签： javascript testing backbone.js tdd jasmine

【解决方案1】：

为什么你的 id 中有一个 #？是错字吗？尝试删除它（id="addQuestion"）

另外，您确定在触发点击之前已初始化视图吗？通常，当事件未触发时，是因为它们设置在视图范围之外的元素上（例如，在视图“el”中未包含的链接上）。但是由于您使用的是正文，所以我看不出它是如何从那里获得的（除非您在帖子中对其进行了修改）。所以我的猜测是你的 jQuery 选择器在这里并不是很有用。试试：

el: "body"

代替：

el: $("body")

【讨论】：

只是在我在这里发布之前稍微修改了代码后引入的一个错字。

【解决方案2】：

通常当我遇到这个问题时，这与您传递给 Backbone 视图的对象字面量的属性在 jQuery 和 DOM 完全加载之前进行评估有关。

这是一个excellent post，它描述了问题和几个解决方案。

【讨论】：