Using the Drupal Backbone Module

Ethan Winn - ethanw/@eethann/

a.k.a "A Deep Dive Into the Shallow Side of the Pool"

First: A Simple Drupal + Backbone Demo:

The Classic: Todo

By Stein Setvik (setvik) of Forum One

Do not forget the enemy:


Backbone Can Help

Let's break it down

  1. Requesting
  2. Rendering
  3. Responding

1. Requesting

Load a node!

Create a node & save it:

...or users, or comments, or flags, or...

Behind the Scenes: Saving

Behind the Scenes: Loading

Backbone.sync can point to anything:

Example: Integration

Thanks EchoDitto for supporting this module development!

2. Rendering


With a twig.js template

(handlebars or _.js also work)

And a Backbone View:

VoilĂ : HTML!

Views can refresh automatically

3. Responding

Backbone Views also handle User Events

We just add a button to our node template

And add a listener in our view

Plus: 4. Collections!!

Load lots of nodes!

Rendering lots of nodes: the "Collection View" pattern

Another simple template

And a Backbone View (a)

and (b)

DRY: We re-use our node template

Item events work in collections!

Backbone is all about delegation

The Drupal Backbone Stack

Setting up our Backbone Module

Menu Callback: App Path

Page Callback: Includes Backbone Lib and App JS

JS: Use Behaviors for App

Make a root element for our app

Use the theme layer for templates

Added advantage that we can use t()

One more demo...


By Cormac McGuire (cromac) / Studio Rua


We want to know what you thought about this session:

Find this session on the DrupalCon Munich site:

And click the "Take the Survey" link.

(and message us on or Twitter!)

ALSO: BoF Tomorrow, 13:00-14:00 in the Athen room.

Thank you!