3

我正在尝试使用 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>

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?"
    }
]

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

更新：问题解决了。我以前没有使用过网络服务器，现在我使用了（我只是在浏览器中打开了文件）。代码工作正常。

4

1 回答 1

1

我测试了你的代码，它似乎对我来说运行良好。

编辑：这是一个指向您的代码的工作小提琴的链接，只是修改了它而不是获取模型我手动添加列表（因为我看不到如何在 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；

于 2012-05-17T22:20:16.447 回答