我正在尝试一个简单的测试。从json编码的php数组中填充Backbone集合。
var MyObjectModel = Backbone.Model.extend({
parse:function(response){
return JSON.parse(response);
}
});
var MyObjectView = Backbone.View.extend({
template: _.template('<a id="<%= id %>" href="#"><%= name %></a> '),
render: function(){
this.$el.html(this.template(this.model.attributes));
return this;
}
});
var MyList = Backbone.Collection.extend({
url: 'testRest.php',
model: MyObjectModel
});
var MyListView = Backbone.View.extend({
el:$("#app"),
initialize: function(){
this.collection.on('add',this.addOne,this);
this.collection.on('reset',this.addAll,this);
},
addOne: function(objectModel){
var objectView = new MyObjectView({model: objectModel});
this.$el.append(objectView.render().el);
},
addAll: function(){
this.$el.empty();
this.collection.forEach(this.addOne,this);
},
render: function(){
return this;
}
});
var myList = new MyList();
var myListView = new MyListView({collection:myList});
myList.fetch().done(function(){
myListView.render();
});
HTML页面尽可能基本
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript" src="backbone-min.js"></script>
<script type="text/javascript" src="test2.js"></script>
</body>
</html>
当文件testRest.php包含
时,它可以正常工作echo json_encode("{\"id\":\"4\",\"name\":\"one\",\"color\":\"ff6600\",\"phoneNumber\":\"+123456789\"}");
但是一旦我尝试在返回的对象中拥有更多的那一项:
echo json_encode("[{\"id\":\"4\",\"name\":\"one\",\"color\":\"ff6600\",\"phoneNumber\":\"+123456789\"},{\"id\":\"1\",\"name\":\"two\",\"color\":\"800080\",\"phoneNumber\":\"\"}]");
我有一个错误:
未捕获的ReferenceError:未定义id
有没有人遇到同样的问题?我错过了什么吗?
提前致谢。
答案 0 :(得分:1)
你的Backbone代码没有任何问题,但你在php脚本上做了两件事:
1)将Content-type标头设置为json
2)json_encode
采用php数组
<?php
header('Content-Type: application/json');
$resp = array(
array(
'id' => 4,
'name' => 'one',
'color' => 'ff6600',
'phoneNumber' => '+123456789'
),
array(
'id' => 1,
'name' => 'two',
'color' => '80080',
'phoneNumber' => ''
)
);
echo json_encode($resp);
正如我在评论中所说,只要设置了JSON.parse
标头,你就不需要Content-type
jQuery已经解析为对象。解析的默认Backbone方法已经返回响应对象,因此您根本不需要覆盖(除非您获得嵌套数据)。