Skip to content

Instantly share code, notes, and snippets.

@Fasani
Last active February 4, 2022 04:38
Show Gist options
  • Save Fasani/7059413 to your computer and use it in GitHub Desktop.
Save Fasani/7059413 to your computer and use it in GitHub Desktop.
A simple Backbone WordPress Example. Using JSON API plugin. (http://wordpress.org/plugins/json-api/)
* {
border: 0;
margin: 0;
outline: 0;
padding: 0;
font-size: 14px;
font-family: Verdana;
}
html, body {
height: 100%;
width: 100%;
}
h1 {
font-size: 16px;
margin-bottom: 15px;
}
h2 {
font-size: 14px;
margin-bottom: 15px;
}
p {
margin-bottom: 15px;
}
#post-list {
padding: 20px;
list-style: none;
}
.single-post {
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
}
var PostItem = Backbone.Model.extend({});
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;
}
});
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);
}
});
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;
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Simple Backbone WordPress Example</title>
<link rel="stylesheet" href="base.css">
</head>
<body>
<ul id="post-list"></ul>
<script type="text/template" id="single-post">
<div id="post-<%= id %>">
<h1><%= title %></h1>
<p>Date: <%= date %></p>
<p><%= content %></p>
<!-- Other data you may want to use. -->
<!--<p>Comments: <%= comment_count %></p>-->
<!--<p><%= type %></p>-->
<!--<p><%= slug %></p>
<!--<p><%= url %></p>
<!--<p><%= status %></p>-->
<!--<p><%= title_plain %></p>-->
<!--<p><%= excerpt %></p>-->
<!--<p><%= modified %></p>-->
<!--<p><%= categories %></p>-->
<!--<p><%= tags %></p>-->
<!--<p><%= author %></p>-->
<!--<p><%= comments %></p>-->
<!--<p><%= attachments %></p>-->
<!--<p><%= comment_status %></p>-->
<!--<p><%= custom_fields %></p>-->
</div>
</script>
<!-- Scripts from CDN JS -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<!-- Local Scripts -->
<script type="text/javascript" src="postItem.js"></script>
<script type="text/javascript" src="postList.js"></script>
<script type="text/javascript" src="postListView.js"></script>
<script type="text/javascript" src="postSingleView.js"></script>
<!-- We use $(document).ready() because we are using scripts from CDN JS -->
<script type="text/javascript">
$(document).ready(function() {
var postList = new PostList();
this.postListView = new PostListView({
collection: postList
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment