我尝试this教程 。
HTML 为 (index.html):
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="jquery.js"></script>
<script src="json2.min.js"></script>
<script src="underscore.js"></script>
<script src="backbone.js"></script>
<script>
$(function () {
var Profile = Backbone.Model.extend();
var ProfileList = Backbone.Collection.extend({
model: Profile,
url: 'jsonSample.json'
});
var ProfileView = Backbone.View.extend({
el: "#profiles",
template: _.template($('#profileTemplate').html()),
render: function (eventName) {
_.each(this.model.models, function (profile) {
var profileTemplate = this.template(profile.toJSON());
$(this.el).append(profileTemplate);
}, this);
return this;
}
});
var profiles = new ProfileList();
var profilesView = new ProfileView({ model: profiles });
profiles.fetch();
profiles.bind('reset', function () {
profilesView.render();
});
});
</script>
<title>Fortified Studio</title>
</head>
<body>
<div id="profiles"></div>
<script id="profileTemplate" type="text/template">
<div class="profile">
<div class="info">
<div class="name">
<%= name %>
</div>
<div class="title">
<%= title %>
</div>
<div class="background">
<%= background %>
</div>
</div>
</div>
</script>
</body>
</html>
jsonSample.json:
{
{
"name" : "AAAA",
"title" : "BBBB",
"background" : "CCCC"
},
{
"name" : "DDDD",
"title" : "EEEE",
"background" : "FFFF"
},
{
"name" : "GGGG",
"title" : "HHHH",
"background" : "IIII"
}
}
但浏览器上没有显示任何内容。这里出了什么问题？
最佳答案
编辑2:
这是一个工作版本的 jsFiddle:http://jsfiddle.net/8RP89/1/
我建议您寻找不同的教程。这看起来真的很不对劲，我必须做出相当多的改变才能让事情正常运转。不过，我不会使用我的示例作为 future 代码的模板。我只是做了足够的工作来确保它有效。
我没有测试的一件事实际上是加载 JSON 文件。不知道如何在 jsFiddle 中做到这一点。
以下是我所做更改的快速概述:
首先，我认为 reset 事件不再在 fetch 上调用，除非您特别要求在 fetch 上调用重置:
profiles.bind('reset', function () {
profilesView.render();
});
相反，最好在初始化期间监听 View 中的 add 事件。示例:
initialize: function(){
this.listenTo(this.collection,"add", this.renderItem);
},
现在，由于添加的每个项目都会调用 add 事件，因此您需要添加方法来单独渲染项目
renderItem: function(profile) {
var profileTemplate = this.template(profile.toJSON());
this.$el.append(profileTemplate);
}
如果集合中已有元素，则上述方法不起作用，因此您需要添加渲染方法来处理现有集合元素:
render: function () {
this.collection.each(function(model){
var profileTemplate = this.template(model.toJSON());
this.$el.append(profileTemplate);
}, this);
return this;
},
现在，您必须在创建 View 后显式调用渲染:
var profilesView = new ProfileView({ collection: profileList });
profilesView.render();
编辑1:
您可能需要更改这两行以使用集合而不是模型。默认情况下，可以使用 this.collection 在 Backbone View 中访问集合对象。本教程中的语法看起来完全错误。我以前从未见过 this.model.models。也许这是 Backbone 的旧版本。
var profilesView = new ProfileView({ collection: profiles });
这行在这里:
_.each(this.collection, function (profile) {
您拥有的代码显示:
_.each(this.model.models, function (profile) {
和:
var profilesView = new ProfileView({ model: profiles });
我可能会更改您的 json 文件以使用数组:
[
{
"id": "p1",
"name" : "AAAA",
"title" : "BBBB",
"background" : "CCCC"
{
"id": "p2",
"name" : "DDDD",
"title" : "EEEE",
"background" : "FFFF"
},
{
"id": "p3",
"name" : "GGGG",
"title" : "HHHH",
"background" : "IIII"
}
]
关于javascript - 一个简单的例子 – Backbone.js 教程 – 基于 JSON + View 的集合，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21975045/