I've looked around a ton, and can't find an answer to this issue. I'm trying to take a local JSON file, load it up using Backbone.js and render it to a template in the browser. My file downloads, and the template appears, but it is never populated by the data. Any thoughts? Thanks in advance.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>People list</title>
<link rel="stylesheet" href=".1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>People list</h1>
<hr />
<div class="page"></div>
</div>
<script type="text/template" id="people-template">
<table class="table striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Photo</th>
<th>Video</th>
</tr>
</thead>
<tbody>
<% _.each(PersonCollection, function(Person) { %>
<tr>
<td><%= Person.get("firstName") %></td>
<td><%= Person.get("lastName") %></td>
<td><%= Person.get("age") %></td>
<td><%= Person.get("photo") %></td>
<td><%= Person.get("video") %></td>
</tr>
<% }); %>
</tbody>
</table>
</script>
</body>
<script src=".8.2/jquery.min.js" type="text/javascript"></script>
<script src=".js/1.4.2/underscore-min.js" type="text/javascript"></script>
<script src=".js/0.9.2/backbone-min.js"></script>
JAVASCRIPT
<script>
// MODEL MODEL MODEL
// MODEL MODEL MODEL
var Person = Backbone.Model;
// COLLECTION COLLECTION COLLECTION
// COLLECTION COLLECTION COLLECTION
var PersonCollection = Backbone.Collection.extend({
model: Person,
url: '/people.json',
parse: function (response) {
return response
}
});
// VIEWS VIEWS VIEWS
// VIEWS VIEWS VIEWS
var About = Backbone.View.extend ({
el: '.page',
render: function () {
var that = this;
var people = new PersonCollection();
people.fetch({
success: function (PersonCollection) {
var template = _.template($('#people-template').html(), {PersonCollection: PersonCollection.models});
that.$el.html(template);
}
})
}
});
var About = new About ();
// ROUTES ROUTES ROUTES
// ROUTES ROUTES ROUTES
var Router = Backbone.Router.extend({
routes: {
'': 'home'
}
});
var router = new Router();
router.on('route:home', function () {
About.render();
});
Backbone.history.start();
</script>
JSON SAMPLE
{
"people": [
{
"firstName": "Jane",
"lastName": "Doe",
"age": "32",
"photo": "test_photo",
"video": "test_video"
},
{
"firstName": "James",
"lastName": "Hamm",
"age": "56",
"photo": "test_photo",
"video": "test_video"
},
Thanks again for any suggestions. I'm new to stackoverflow (first question posted) so let me know if I need to provide more information.
I've looked around a ton, and can't find an answer to this issue. I'm trying to take a local JSON file, load it up using Backbone.js and render it to a template in the browser. My file downloads, and the template appears, but it is never populated by the data. Any thoughts? Thanks in advance.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>People list</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1>People list</h1>
<hr />
<div class="page"></div>
</div>
<script type="text/template" id="people-template">
<table class="table striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Photo</th>
<th>Video</th>
</tr>
</thead>
<tbody>
<% _.each(PersonCollection, function(Person) { %>
<tr>
<td><%= Person.get("firstName") %></td>
<td><%= Person.get("lastName") %></td>
<td><%= Person.get("age") %></td>
<td><%= Person.get("photo") %></td>
<td><%= Person.get("video") %></td>
</tr>
<% }); %>
</tbody>
</table>
</script>
</body>
<script src="http://cdnjs.cloudflare./ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare./ajax/libs/underscore.js/1.4.2/underscore-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare./ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
JAVASCRIPT
<script>
// MODEL MODEL MODEL
// MODEL MODEL MODEL
var Person = Backbone.Model;
// COLLECTION COLLECTION COLLECTION
// COLLECTION COLLECTION COLLECTION
var PersonCollection = Backbone.Collection.extend({
model: Person,
url: '/people.json',
parse: function (response) {
return response
}
});
// VIEWS VIEWS VIEWS
// VIEWS VIEWS VIEWS
var About = Backbone.View.extend ({
el: '.page',
render: function () {
var that = this;
var people = new PersonCollection();
people.fetch({
success: function (PersonCollection) {
var template = _.template($('#people-template').html(), {PersonCollection: PersonCollection.models});
that.$el.html(template);
}
})
}
});
var About = new About ();
// ROUTES ROUTES ROUTES
// ROUTES ROUTES ROUTES
var Router = Backbone.Router.extend({
routes: {
'': 'home'
}
});
var router = new Router();
router.on('route:home', function () {
About.render();
});
Backbone.history.start();
</script>
JSON SAMPLE
{
"people": [
{
"firstName": "Jane",
"lastName": "Doe",
"age": "32",
"photo": "test_photo",
"video": "test_video"
},
{
"firstName": "James",
"lastName": "Hamm",
"age": "56",
"photo": "test_photo",
"video": "test_video"
},
Thanks again for any suggestions. I'm new to stackoverflow (first question posted) so let me know if I need to provide more information.
Share Improve this question asked May 19, 2013 at 21:27 xEmptyCanxxEmptyCanx 5283 gold badges10 silver badges22 bronze badges 1-
1
Maybe you should fix JSON data, try to remove
"people"
, leave only array with objects. – vadimrostok Commented May 19, 2013 at 21:36
2 Answers
Reset to default 2If you don't wan't to modify your JSON file, you could change parse function in your PersonCollection to return you the person array. Example:
var PersonCollection = Backbone.Collection.extend({
model: Person,
url: '/people.json',
parse: function (response) {
// Return people object which is the array from response
return response.people
}
});
Backbone Documentation: http://backbonejs/#Model-parse
parse is called whenever a model's data is returned by the server, in fetch, and save. The function is passed the raw response object, and should return the attributes hash to be set on the model. The default implementation is a no-op, simply passing through the JSON response. Override this if you need to work with a preexisting API, or better namespace your responses.
U can directly populate JSON data with your Collection. Collection will take care of populating the data according to the array of JSON objects. In your case if you don't want to change JSON data, i.e. if you want to keep the 'people' attribute as it is, you can populate all data by backbone-relational.js. It helps to work with nested JSON data.