Using Backbone Within the WordPress Admin: The Back End. The rumours are true!
The WordPress Admin Panel is now using Underscore and Backbone! This means that with minimal effort, we can begin to utilise these fantastic JavaScript libraries in our own plugins. This tutorial will show you exactly how you can do that. We'll create the Admin part of a Quiz plugin. We'll use a simple Custom Post Type to save Questions, and then within each question we'll add a meta box that will allow us to enter up to 4 answers and select which is the correct one.
I will say up front, that the plugin we are building in this tutorial may seem overly verbose for what it accomplishes. What We'll Do In this first part, we'll set up the back end of our plugin. Register a Custom Post Type - for our QuestionsAdd a meta box that will allow us to enter answers on the same pageSave information from the meta boxes when the post is savedSave information from our ajax requests (via Backbone) Then in the Second Part...
What We'll Build 1. 2. Inside of wp_quiz.php. 3. 4. Save Post. Kadamwhite/wordbone-pressback. JSON API. Kadamwhite/wcchi-demo. 10up/grunt-wp-theme. Underscore.js. Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects.
It’s the answer to the question: “If I sit down in front of a blank HTML page, and want to start being productive immediately, what do I need?” … and the tie to go along with jQuery's tux and Backbone's suspenders. Underscore provides 80-odd functions that support both the usual functional suspects: map, select, invoke — as well as more specialized helpers: function binding, javascript templating, deep equality testing, and so on. It delegates to built-in functions, if present, so modern browsers will use the native implementations of forEach, map, reduce, filter, every, some and indexOf. The project is hosted on GitHub. Collection Functions (Arrays or Objects) _.each(list, iterator, [context]) Alias: forEach Iterates over a list of elements, yielding each in turn to an iterator function. . _.every([true, 1, null, 'yes'], _.identity); => false.
#21170 (JavaScript actions and filters) Structuring Applications with JavaScript, Backbone and WordPress. WordCamp Chicago, June 2013 K.Adam White • @kadamwhite JS engineer at Bocoup At any time, hit "escape" to get an overview of all slides.
This is a two-dimensional slide deck; Many slides have code examples available if you press "down. " BostonWP Co-Organizer I was on your side during the Bruins/'Hawks finals! So. WordPress & JavaScript A Bit of History In the beginning... Did a lot of what jQuery does (even uses $)Works by modifying native JS prototypes (messy)Wasn't a perfect solution for WP jQuery: @since 2.2.0 jQuery added to WordPress in January '07 by Matt Mullenweg The Whole Family Prototype is still there (script-loader.php L108): $scripts->add( 'prototype', '//ajax.googleapis.com/[...]prototype.js', array(), '1.7.1' ); Of the 134 scripts defined in script-loader.php, 87 scripts (over 60%) relate to jQuery Why was jQuery So Awesome? Focus Designed to do specific things really well: HTML document traversalEvent handlingAjax interactionAnimation Really good at this problem: JS Needs within WordPress.
Building apps with Backbone.js and WordPress.