<!DOCTYPE HTML>
<html>
<head>
<title></title>
<link href="/bundles/hoaxpartner/css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="header">Backbone</div>
<div id="sidebar"></div>
<div id="content"></div>
<script type="text/template" id="tpl-user-list-item">
<a href='#users/<%= id %>'><%= name %></a>
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<script>
window.User = Backbone.Model.extend();
window.UserCollection = Backbone.Collection.extend({
model: User,
url: "/app_dev.php/api/users/1/",
parse : function(resp) {
/*
$.each(resp.users, function(key1, value1) {
resp.users[key1] = $.map(value1, function(value2, key2) {
return [value2];
});
});
*/
return resp.users;
},
});
// Views
window.UserListView = Backbone.View.extend({
tagName:'ul',
initialize:function () {
this.model.bind("reset", this.render, this);
},
render:function (eventName) {
_.each(this.model.models, function (user) {
$(this.el).append(new UserListItemView({model:user}).render().el);
}, this);
return this;
}
});
window.UserListItemView = Backbone.View.extend({
tagName:"li",
template:_.template($('#tpl-user-list-item').html()),
render:function (eventName) {
$(this.el).html(this.template(this.model.toJSON()));
return this;
}
});
// Router
var AppRouter = Backbone.Router.extend({
routes:{
"":"list"
},
list:function () {
this.userList = new UserCollection();
this.userListView = new UserListView({model:this.userList});
this.userList.fetch();
$('#sidebar').html(this.userListView.render().el);
}
});
$(function() {
var app = new AppRouter();
Backbone.history.start();
});
</script>
</body>
</html>
/app_dev.php/api/users/1 call output:
{
"users": [
{
"userid": "Jf9CEy70",
"password": "g5JY9OB2",
"status_id": 1,
"created": "2014-01-13 18:33:25"
},
{
"userid": "8LZVQX6b",
"password": "QFzO92tM",
"status_id": 1,
"created": "2014-01-13 18:35:00"
},
{
"userid": "cItWduq9",
"password": "SuzcWisl",
"status_id": 0,
"created": "2014-01-13 18:35:21"
}
]
}
I am currently receiving the data from the API endpoint "/app_dev.php/api/users/1," but I am facing difficulties in displaying it.