javascript - Render JSON data to backbone.js template -
i've looked around ton, , can't find answer issue. i'm trying take local json file, load using backbone.js , render template in browser. file downloads, , template appears, never populated data. thoughts? in advance.
html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>people list</title> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/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.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js" type="text/javascript"></script> <script src="http://cdnjs.cloudflare.com/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 = backbone.view.extend ({ el: '.page', render: function () { var = this; var people = new personcollection(); people.fetch({ success: function (personcollection) { var template = _.template($('#people-template').html(), {personcollection: personcollection.models}); that.$el.html(template); } }) } }); var = new (); // 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 suggestions. i'm new stackoverflow (first question posted) let me know if need provide more information.
if don't wan't modify json file, change parse function in personcollection return person array. example:
var personcollection = backbone.collection.extend({ model: person, url: '/people.json', parse: function (response) { // return people object array response return response.people } }); backbone documentation: http://backbonejs.org/#model-parse
parse called whenever model's data returned server, in fetch, , save. function passed raw response object, , should return attributes hash set on model. default implementation no-op, passing through json response. override if need work preexisting api, or better namespace responses.
Comments
Post a Comment