404 Not Found
\n\n
\n\n\n '; if ( featured_image ) { ;__p += '\n ) == null ? '' : __t) +')
\n '; } ;__p += '\n
\n\n \n
\n\n\n
\n \n ' +((__t = ( title )) == null ? '' : __t) +'\n
\n \n';}return __p}; -------------------------------------------------------------------------------- /PostListr/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jetpack-api", 3 | "version": "0.0.0", 4 | "description": "Playing with the Jetpack JSON API", 5 | "main": "app.js", 6 | "author": "", 7 | "license": "BSD", 8 | "devDependencies": { 9 | "grunt": "~0.4.1", 10 | "grunt-contrib-jst": "~0.5.0" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /PostListr/templates/post.tmpl: -------------------------------------------------------------------------------- 1 |
2 |
3 |
21 |
22 |
4 | <% if ( featured_image ) { %>
5 | 
6 | <% } %>
7 |
8 |
9 |
10 |
19 |
20 |
11 |
18 | 12 | <%= title %> 13 |
14 | 17 |-------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WordBone PressBack 2 | 3 | This repository serves to hold some ongoing demos/experiments in building applications with [Backbone.js](http://backbonejs.org) on top of [WordPress](http://wordpress.org). 4 | 5 | Let me stress: *experiments*. These are not necessarily proven best practices. If you're interested in figuring this out with us, read on! 6 | 7 | ## Projects in this repository 8 | 9 | 1. [Step By Step from WordPress & jQuery to WordPress & Backbone](https://github.com/kadamwhite/wcchi-demo#readme) 10 | * A repository demonstrating how to refactor a jQuery theme component to leverage Backbone.js for structure and eventing 11 | 2. [TodoMVC Theme](TodoMVC) 12 | * The [Backbone.js example](http://todomvc.com/architecture-examples/backbone/) from [TodoMVC](http://todomvc.com), re-envisioned as a WordPress theme (note: Still a WIP, ideally this would [sync to-do's to the WP database](https://github.com/kadamwhite/wordbone-pressback/issues/1)) 13 | 3. [TwentyFuture Theme](TwentyFuture) 14 | * The [Twenty Twelve](http://twentytwelvedemo.wordpress.com/) default theme, abused to render its post content using Backbone views. 15 | 4. [PostListr](PostListr) 16 | * A small, standalone Backbone app, which will list out the last 10 entries in a WordPress.com or Jetpack JSON API-enabled blog. 17 | -------------------------------------------------------------------------------- /TodoMVC/functions.php: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | 21 | 22 | 23 |
todos
30 | 31 |- `.
74 | addOne: function (todo) {
75 | var view = new app.TodoView({ model: todo });
76 | $('#todo-list').append(view.render().el);
77 | },
78 |
79 | // Add all items in the **Todos** collection at once.
80 | addAll: function () {
81 | this.$('#todo-list').html('');
82 | app.Todos.each(this.addOne, this);
83 | },
84 |
85 | filterOne: function (todo) {
86 | todo.trigger('visible');
87 | },
88 |
89 | filterAll: function () {
90 | app.Todos.each(this.filterOne, this);
91 | },
92 |
93 | // Generate the attributes for a new Todo item.
94 | newAttributes: function () {
95 | return {
96 | title: this.$input.val().trim(),
97 | order: app.Todos.nextOrder(),
98 | completed: false
99 | };
100 | },
101 |
102 | // If you hit return in the main input field, create new **Todo** model,
103 | // persisting it to *localStorage*.
104 | createOnEnter: function (e) {
105 | if (e.which !== ENTER_KEY || !this.$input.val().trim()) {
106 | return;
107 | }
108 |
109 | app.Todos.create(this.newAttributes());
110 | this.$input.val('');
111 | },
112 |
113 | // Clear all completed todo items, destroying their models.
114 | clearCompleted: function () {
115 | _.invoke(app.Todos.completed(), 'destroy');
116 | return false;
117 | },
118 |
119 | toggleAllComplete: function () {
120 | var completed = this.allCheckbox.checked;
121 |
122 | app.Todos.each(function (todo) {
123 | todo.save({
124 | 'completed': completed
125 | });
126 | });
127 | }
128 | });
129 | })(jQuery);
130 |
--------------------------------------------------------------------------------
/TodoMVC/js/views/todos.js:
--------------------------------------------------------------------------------
1 | /*global Backbone, jQuery, _, ENTER_KEY */
2 | var app = app || {};
3 |
4 | (function ($) {
5 | 'use strict';
6 |
7 | // Todo Item View
8 | // --------------
9 |
10 | // The DOM element for a todo item...
11 | app.TodoView = Backbone.View.extend({
12 | //... is a list tag.
13 | tagName: 'li',
14 |
15 | // Cache the template function for a single item.
16 | template: _.template($('#item-template').html()),
17 |
18 | // The DOM events specific to an item.
19 | events: {
20 | 'click .toggle': 'toggleCompleted',
21 | 'dblclick label': 'edit',
22 | 'click .destroy': 'clear',
23 | 'keypress .edit': 'updateOnEnter',
24 | 'blur .edit': 'close'
25 | },
26 |
27 | // The TodoView listens for changes to its model, re-rendering. Since there's
28 | // a one-to-one correspondence between a **Todo** and a **TodoView** in this
29 | // app, we set a direct reference on the model for convenience.
30 | initialize: function () {
31 | this.listenTo(this.model, 'change', this.render);
32 | this.listenTo(this.model, 'destroy', this.remove);
33 | this.listenTo(this.model, 'visible', this.toggleVisible);
34 | },
35 |
36 | // Re-render the titles of the todo item.
37 | render: function () {
38 | this.$el.html(this.template(this.model.toJSON()));
39 | this.$el.toggleClass('completed', this.model.get('completed'));
40 | this.toggleVisible();
41 | this.$input = this.$('.edit');
42 | return this;
43 | },
44 |
45 | toggleVisible: function () {
46 | this.$el.toggleClass('hidden', this.isHidden());
47 | },
48 |
49 | isHidden: function () {
50 | var isCompleted = this.model.get('completed');
51 | return (// hidden cases only
52 | (!isCompleted && app.TodoFilter === 'completed') ||
53 | (isCompleted && app.TodoFilter === 'active')
54 | );
55 | },
56 |
57 | // Toggle the `"completed"` state of the model.
58 | toggleCompleted: function () {
59 | this.model.toggle();
60 | },
61 |
62 | // Switch this view into `"editing"` mode, displaying the input field.
63 | edit: function () {
64 | this.$el.addClass('editing');
65 | this.$input.focus();
66 | },
67 |
68 | // Close the `"editing"` mode, saving changes to the todo.
69 | close: function () {
70 | var value = this.$input.val().trim();
71 |
72 | if (value) {
73 | this.model.save({ title: value });
74 | } else {
75 | this.clear();
76 | }
77 |
78 | this.$el.removeClass('editing');
79 | },
80 |
81 | // If you hit `enter`, we're through editing the item.
82 | updateOnEnter: function (e) {
83 | if (e.which === ENTER_KEY) {
84 | this.close();
85 | }
86 | },
87 |
88 | // Remove the item, destroy the model from *localStorage* and delete its view.
89 | clear: function () {
90 | this.model.destroy();
91 | }
92 | });
93 | })(jQuery);
94 |
--------------------------------------------------------------------------------
/TodoMVC/lib/backbone.localStorage/backbone.localStorage.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Backbone localStorage Adapter
3 | * Version 1.1.0
4 | *
5 | * https://github.com/jeromegn/Backbone.localStorage
6 | */
7 | (function (root, factory) {
8 | if (typeof define === "function" && define.amd) {
9 | // AMD. Register as an anonymous module.
10 | define(["underscore","backbone"], function(_, Backbone) {
11 | // Use global variables if the locals is undefined.
12 | return factory(_ || root._, Backbone || root.Backbone);
13 | });
14 | } else {
15 | // RequireJS isn't being used. Assume underscore and backbone is loaded in