我正在尝试使用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服务器,我现在这样做(我只是在浏览器中打开了文件)。代码工作正常。
答案 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中