Backbone - 从json和更新视图填充集合

时间:2012-05-17 19:11:19

标签: javascript backbone.js firebug backbone-events backbone-views

我正在尝试使用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?"
    }
]

奖金问题:我使用的是firebug,但发现调试这个东西非常困难。如果我在控制台中写console.log(Questions);,我会得到 ReferenceError:未定义问题。那是为什么?

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

1 个答案:

答案 0 :(得分:1)

我测试了你的代码,它似乎运行得很好。

编辑:这里有一个链接到正常工作fiddle的代码,只是对其进行了修改,而不是抓取模型我手动添加了列表(因为我没有&#39;看看我如何在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中