Last active
February 4, 2022 04:38
-
-
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/)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| 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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var PostItem = Backbone.Model.extend({}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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); | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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