Javascript 主干-从json和更新视图填充集合

我试图用JSON文件中的数据填充集合。我是一个骨干初学者，所以我的问题可能很容易解决。但是我一整天都在为此而挣扎，所以现在我要寻求指导

我正在创建一个调查问卷，并希望从本地存储的JSON文件加载问题（稍后我将从服务器获取问题）

我不确定我的集合是否被填充，或者问题是视图是否没有更新。我读了很多教程，从不同的地方得到了一些想法

嗯。。这是我的javascript代码：

$(function(){

var Question = Backbone.Model.extend({

    defaults: {
        q: "Empty question..."
    },

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


var QuestionList = Backbone.Collection.extend({
    model: Question,
    url: "question.json"
});

var Questions = new QuestionList;


var QuestionView = Backbone.View.extend({

    tagName:  "li",

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

    initialize: function() {
        _.bindAll(this, 'render', 'remove');
        this.model.bind('change', this.render);
    },

    render: function() {
        $(this.el).html(this.template(this.model.toJSON()));
        return this;
    }
});


var AppView = Backbone.View.extend({

    el: $("#questionnaire_app"),

    itemTemplate: _.template($('#item-template').html()),

    initialize: function() {
        _.bindAll(this, 'addOne', 'addAll', 'render');

        Questions.bind('reset',   this.addAll);
        Questions.fetch();
    },

    addOne: function(question) {
        var view = new QuestionView({model: question});
        this.$("#question-list").append(view.render().el);
    },

    addAll: function() {
        Questions.each(this.addOne);
    }
});

var App = new AppView;

});

我有以下HTML代码：

<div id="questionnaire_app">
    <div class="title">
        <h1>Questions</h1>
    </div>
    <div class="content">
        <div id="questions">
            <ul id="question-list"></ul>
        </div>
    </div>
</div>

<script type="text/template" id="item-template">
    <div class="question">
        <div class="display">
            <p class="question-content"><%= q %></p>
        </div>
    </div>
</script>

附加问题：我使用firebug，但发现调试这些东西非常困难。如写

console.log（问题）在控制台中我是否获得参考错误：未定义问题。为什么呢

更新：问题已解决。我以前没有使用web服务器，现在我使用了（我只是在浏览器中打开了文件）。代码运行良好。
我测试了您的代码，我觉得它运行良好

编辑：这里有一个链接，指向一个使用代码的链接，只是修改了它，而不是获取模型，我手动添加了列表（因为我不知道如何在JSFIDLE中复制它）。可能您的问题在于JSON文件（只读，位置错误）

firebug中出现引用错误的原因是，问题引用超出了document ready函数末尾的范围，如果将其分配给某个对象，则可以将其记录下来

比如说

var q = {};

$(function() {

  // Your code
  var Questions = new QuestionList;
   q.Questions = Questions
 //the rest of your code
});

现在您可以使用console.log（q.Questions）将其登录到firebug中
 new QuestionList（）可能是您参考的解决方案error@Alex没有必要在末尾添加（）。是否还缺少其他内容，您的代码运行良好。谢谢：）现在我可以记录问题，并确认它为空！集合尚未填充。也许还有其他问题。你真的能在视图中看到问题吗？谢谢你的JSFIDLE。我可以看到，当您手动添加问题时，它会起作用。我不使用web服务器，我只是在浏览器中打开文件，json文件位于同一目录中。你认为这是个问题吗？我在firebug控制台中没有看到ajax调用（我确实希望如此）。我首先在本地机器上的开发服务器上使用同一目录中的JSON文件尝试了它（这很有效）。我现在也测试了它，只需在浏览器中打开该文件，它还会呈现问题（不过，我也没有看到任何Ajax请求，但我不确定是否应该有）。
var q = {};

$(function() {

  // Your code
  var Questions = new QuestionList;
   q.Questions = Questions
 //the rest of your code
});