<!doctype html>
<html>
<head>
<title>Backbone tutorial</title>
</head>
<body>
<div class="user">user</div>
<div class="page"></div>
<script type="text/template" id="user-list-template">
我无法在daya.key上获取数据
<h1> <%= data.key %> </h1>
</script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="backbone.js"></script>
<script>
这是我的收藏代码
var Album = Backbone.Collection.extend({
url : "/data.json"
});
这是我的观看代码
var UserList= Backbone.View.extend({
el:'.page',
template:_.template($('#user-list-template').html()),
render : function(){
var that=this;
var album= new Album();
album.fetch({
success:function(album){
var _data = {data : album.models} ;
$(that.el).html(that.template(_data));
}
})
}
});
这是我的路由器代码
var Router = Backbone.Router.extend({
routes: {
"": "home" // #help
}
});
var userList= new UserList();
var router = new Router();
router.on('route:home', function(){
userList.render();
});
Backbone.history.start();
</script>
</body>
</html>
这是data.json文件
{ "key" : "value to print on template "}
答案 0 :(得分：0)
服务器需要为collection.fetch（）请求返回模型对象的JSON数组。所以data.json应该是这样的：
[{"key":"value to print on template"},{"key":"another value"}]
尝试这个集合视图渲染实现：
<强>型号：
var User = new Backbone.Model.extend({});
<强>收集：
var Album = new Backbone.Collection.extend({
model: User,
url: "/data.json"
});
//create collection instance
var album = new Album();
查看：
var UserList= Backbone.View.extend({
el:'.page',
template:_.template($('#user-list-template').html()),
initialize: function(){
//register a collection data add event handler
this.listenTo(album,"add",this.addUser);
//register a collection data remove event handler
this.listenTo(album,"remove",this.removeUser);
album.fetch();
},
render : function(){
},
addUser: function(user){ //apply model data to view template and append to view element
this.$el.append(this.template(user.toJSON()));
},
removeUser: function(user){
//view state update implementation when data have been removed from collection
}
});
<强>模板：
<script type="text/template" id="user-list-template">
<h1><%= key %></h1>
</script>
div.user视图将根据集合数据操作动态添加/删除用户列表视图。
希望这有用。
答案 1 :(得分：0)
我建议两次修改
1.首先检查模板中的数据字段。由于您从集合中获取数据，因此它将是模型数组。
<h1> <%= data[0].key %> </h1>
或者您可以使用for循环迭代集合
2. data.json文件应如下所示
[{"key" : "value"}]