json - Implementing backbone.js to retrieve Wordpress category posts -

note: reformulated post after solving original problem because ran problem can fit under same title. first i'll summarize first problem , solution, continue second problem.

my wordpress 3.8 installation set work jetpack's json api. backbone.js requests canceled (indicated google chrome's network panel). furthermore, got report in console:

xmlhttprequest cannot load http://public-api.wordpress.com/rest/v1/sites/americawasnotfree.org/posts/?category=life-after-the-treaties. no 'access-control-allow-origin' header present on requested resource. origin 'http://americawasnotfree.org' therefore not allowed access. 

solution: use json api plugin dphiffer instead of jetpack's solution.

new issue: though data, have not figured out how work using underscore's templating framework. i'm following this tutorial. below broken code (which includes code suggested dato'), , below i've tried.

    <div class="posts"></div>      <script type="text/template" id="posts-list-template">         <div>here the...</div>         <% _.each(yourlistposts, function(yourlistpost) { %>         <%= yourlistpost.get('title') %>         <% }); %>     </script>  <script type="text/javascript"> (function($){ $( document ).ready(function() {      $.ajaxprefilter( function( options, originaloptions, jqxhr ) {       options.url = '//americawasnotfree.org/api/' + options.url;     });      var post = backbone.model.extend({});     var posts = backbone.collection.extend({         model: post,         url:'get_category_posts/?slug=life-after-the-treaties/'     });      var postslist = backbone.view.extend({         el: '.posts',         render: function() {             var = this;             var posts = new posts();             posts.fetch({                 success: function(posts) {                         var template = _.template($('#posts-list-template').html(), {                             yourlistposts: that.collection.models                         });                     that.$el.html(template);                 }             })         }     });      var router = backbone.router.extend({         routes: {           "": "category"         }     });      var postslist = new postslist();      var router = new router();     router.on('route:category', function() {         postslist.render();     });     backbone.history.start(); }); })(jquery); </script> 

i have modified #posts-list-template in several ways:

1. passed posts data argument in _.template(), tried traversing object using bracket notation: posts["responsejson"]["posts"][0]["content"]. (if assign returned object variable google chrome's console, can the "content" of post number 0 using notation.

2. passed fetched data through jquery.parsejson( data ) (thinking data might not correctly parsed).

3. i know _.template() correctly passing templates. function succeeds in displaying div , sample text when placed in #posts-list-template.

i suggest use code

javascript

    (function($) {     $(document).ready(function() {         var post = backbone.model.extend({});         var posts = backbone.collection.extend({             model:post,             url: 'public-api.wordpress.com/rest/v1/sites/americawasnotfree.org/posts/?category=life-after-the-treaties'             // url: 'http://backbonejs-beginner.herokuapp.com/users'         });         var postslist = backbone.view.extend({             el: '.posts',             render: function() {                 var = this;                 var posts = new posts();                 posts.fetch({                     success: function() {                         var template = _.template(yourviewtemplate, {                             yourlistposts: that.collection.models                         });                         that.$el.html(template);                     }                 })             }         });         var router = backbone.router.extend({             routes: {                 "": "category"             }         });         var postslist = new postslist();         var router = new router();         router.on('route:category', function() {             postslist.render();         });         backbone.history.start();     }); })(jquery); 

html

<% _.each(yourlistposts, function(yourlistpost) { %> <%= yourlistpost.get('name') %> <% }); %>