javascript - 主干 - 从 json 填充集合并更新 View

Question

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

我正在创建一份问卷，并希望从本地存储的 JSON 文件中加载问题(我稍后会从服务器获取问题)。

我不确定我的收藏是否完全被填充，或者问题是否在于 View 没有更新。我已经阅读了很多教程，并且从不同的地方得到了一些想法。

嗯..这是我的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>

JSON 文件如下所示:

[
    {
        "q": "How were your meeting with Dr. Apfelstrudel?"
    },
    {
        "q": "What do you think of the movie Die Hard 4.0"
    },
    {
        "q": "Are people from Mars really green?"
    }
]

奖励问题:我使用 firebug，但发现很难调试这些东西。例如，如果我在控制台中写入 console.log(Questions);，我会得到 ReferenceError: Questions is not defined。这是为什么？

更新:问题已解决。我以前没有使用过 Web 服务器，但我现在使用了(我只是在浏览器中打开文件)。代码工作正常。

Answer 1

我测试了你的代码，我觉得它运行良好。

编辑:这是一个工作fiddle 的链接使用您的代码，只是修改它而不是获取我手动添加列表的模型(因为我看不到如何在 jsfiddle 中复制它)。也许您的问题出在您的 JSON 文件上(只读，位置错误)。

您在 firebug 中收到引用错误的原因是因为问题引用超出了文档就绪函数末尾的范围，如果您将其分配给某些内容，您将能够记录它。

例如

var q = {};

$(function() {

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

现在您可以使用 console.log(q.Questions); 在 firebug 中记录它；