Tag Archives: wordpress

A Simple Backbone WordPress Example

I’ve been working on this blog now for a little under two weeks and I’ve started to build out the front end using Backbone.

WordPress JSON API

The first thing I needed was the blog content being returned via JSON so my backbone app could easily consume the data.

Plugins to the rescue, turns out some one has already done a pretty good job at creating a WordPress JSON API, I installed it and it seems to work perfectly.

Creating the backbone Front End

I’ve tried to keep this example as simple as possible. We use a model, a collection and two views.

The model is super simple:

var PostItem = Backbone.Model.extend({});

The collection contains a single API end point and a function to iterate over the data so we can push that data into the models.

var PostList = Backbone.Collection.extend({
 
  model: PostItem,
 
  url: 'http://blog.michaelfasani.com/api/get_posts/',
 
  parse: function (data) {
    var parsedData = [];
 
    //This is all the post data returned by the API call above.
    $(data.posts).each(function () {
      var id = this.id,
          type = this.type,
          slug = this.slug,
          url = this.url,
          status = this.status,
          title = this.title,
          title_plain = this.title_plain,
          content = this.content,
          excerpt = this.excerpt,
          date = this.date,
          modified = this.modified,
          categories = this.categories,
          tags = this.tags,
          author = this.author,
          comments = this.comments,
          attachments = this.attachments,
          comment_count = this.comment_count,
          comment_status = this.comment_status,
          custom_fields = this.custom_fields;
 
      parsedData.push({
        id: id,
        type: type,
        slug: slug,
        url: url,
        status: status,
        title: title,
        title_plain: title_plain,
        content: content,
        excerpt: excerpt,
        date: date,
        modified: modified,
        categories: categories,
        tags: tags,
        author: author,
        comments: comments,
        attachments: attachments,
        comment_count: comment_count,
        comment_status: comment_status,
        custom_fields: custom_fields
      });
    });
 
    return parsedData;
  }
 
});

Our first view is a view to display a single model:

var PostSingleView = Backbone.View.extend({
 
  tagName: 'li',
  
  className: 'single-post',
 
  template: _.template($('#single-post').html()),
 
  render: function() {
    this.$el.html(this.template(this.model));
    return this;
  }
});

Our second view is a list view which will display all of the single model views:

var PostListView = Backbone.View.extend({
 
  el: '#post-list',
	
  initialize: function() {
    this.listenTo(this.collection, 'sync', this.render);
    this.collection.fetch();
  },
 
  render: function() {
    this.$el.html('');
    this.collection.each(this.addSinglePost, this);
    return this;
  },
 
  addSinglePost: function(singlePost) {
    var view = new PostSingleView({
      model: singlePost.attributes
    });
  this.$el.append(view.render().el);
  }
});

I have put together a simple CSS style sheet and sample HTML page which contains my underscore templates and some containers for my views to work with.

All of this code can be downloaded and viewed via a GitHub Gist.