I managed to display the data returned from JSON using the code below.
Note that I used JavaScript bracket notation to access the posts array rather than Backbone’s .get method. Also note that the object fetched is passed to a variable called posts, which is then passed to _.template. I’m betting it’s this that prevents me from using Backbone’s .get method, but I’ll save the question for a separate thread.
<script type="text/template" id="posts-list-template">
<div>Here is the...</div>
<% _.each(posts, function(post) { %>
<div><%= post['title'] %></div>
<%= post.content %>
<% }); %>
</script>
<script type="text/javascript">
(function($){
$( document ).ready(function() {
$.ajaxPrefilter( function( options, originalOptions, jqXHR ) {
options.url="//americawasnotfree.org/api/" + options.url;
});
var Posts = Backbone.Collection.extend({
url:'get_category_posts/?slug=life-after-the-treaties/'
});
var PostsList = Backbone.View.extend({
el: '.posts',
render: function() {
var that = this;
obj = new Posts();
obj.fetch({
success: function() {
posts = obj["models"][0]["attributes"]["posts"];
var template = _.template($('#posts-list-template').html(), posts );
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>