Using the Drupal Backbone Module

Ethan Winn - ethanw/@eethann/ethan@echoditto.com

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:

@searls: https://speakerdeck.com/u/searls/p/confidencejs

Backbone Can Help

Let's break it down

Requesting
Rendering
Responding

1. Requesting

Load a node!

// Load a  node
var oneNode = Drupal.Backbone.Models.Node({nid: 1});
myNode.fetch();

// Then we can run things like:
console.log(oneNode.get('title'));
oneNode.set('title', 'New Title!');
console.dir(oneNode.attributes);
// -> { nid: 1, promoted: 1, title: "title", etc. }

Create a node & save it:

// Create our node model object
var myNode = Drupal.Backbone.Models.Node({
    type: "page",
    title: "This is a new comment",
    body: "That's it, really."
});

// Save to send the data to the server
myNode.save();

// After save, we get nid added to the node
// model, and any additional properties.

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

Behind the Scenes: Saving

Behind the Scenes: Loading

Backbone.sync can point to anything:

Example: Archive.org Integration

Thanks EchoDitto for supporting this module development!

2. Rendering

...client-side!

With a twig.js template

<article>
    <header>
        <title>
          {{ title }}
        </title>
    </header>
    <div class="body">
      {{ body }}
    </div>
</article>

(handlebars or _.js also work)

And a Backbone View:

// Create a (Backbone) view for our node (using the Twig.js templating engine)
var NodeView = Drupal.Backbone.Views.Base.extend({
  templateSelector: '#template-one-node',
  renderer: 'twig'
})

// Create a demo node model object to display.
var myNode = new Drupal.Backbone.Models.Node({
  title: 'Example Node'
})

// Create an instance of our node view to render this node.
var myNodeView = new NodeView({model: myNode});

// Run the render function
myNodeView.render();

Voilà: HTML!

Views can refresh automatically

// Updating a node when it changes
var NodeView = Drupal.Backbone.Views.Base.extend({
  templateSelector: '#template-one-node',
  renderer: 'twig',
  initialize: function(options) {
    this.constructor.__super__.initialize.call(this, options);
    this.model.bind('change', this.render);
  }
});
// Asume that we already have a node ready to go:
var myNodeView = new NodeView({model: myNode});
// Render first:
myNodeView.render();
// And if we change something later, the HTML will update AUTOMATICALLY.
myNode.set('title', 'Magic!');

3. Responding

Backbone Views also handle User Events

We just add a button to our node template

   <div class="node promoted-{{ promote }}">
     <div class="header">
       <div class="title">
	 {{ title }}
       </div>
       {# Add a button element to toggle promote status #}
       <button value="Promote" class="promote-toggle">
	 {% if promote == 1 %}Un-promote{% else %}Promote{% endif %}
       </button>
     </div>
   </div>

And add a listener in our view

// Changing a node example
var NodeView = Drupal.Backbone.Views.Base.extend({
    events: {
        'click .promote-toggle': promoteToggle
    },
    initialize: function(options) {
        _(this).bindAll('promoteToggle');
        this.model.bind('change', 'render');
    },
    promoteToggle: function(e) {
	// BAAAAAD: this should use a method on this.model
        this.model.set('promoted', !this.model.get('promoted'));
        this.model.save();
    }
});

Plus: 4. Collections!!

Load lots of nodes!

// Load a collection for a (Drupal) view:
var myViewCollection = Drupal.Backbone.Collections.NodeView({
    model: Drupal.Backbone.Models.Node,
    viewName: "drupalcon_munich_example_view"
});
// Fetch all nodes in the view from the server
mySearchResults.fetch();

// Then, we can run code like this:
mySearchResults.at(0)
mySearchResults.at(0).set('title', "I was in a collection!");
mySearchResults.save();

Rendering lots of nodes: the "Collection View" pattern

Another simple template

<h1>View Results</h1>
<ul class="search-results">
  {# Search results go here, via ViewCollection.render #}
</ul>

And a Backbone View (a)

// Create Collection class
var collection = new Drupal.Backbone.Collections.NodeView({
  model: Drupal.Backbone.Models.Node,
  viewName: 'drupalcon_munich_basic_view'
});

// Create Node View
var NodeView = Drupal.Backbone.Views.Base.extend({
  templateSelector: '#backbone_munich_node_template',
  renderer: 'twig',
  tagName: 'li'
});

and (b)

// Create Collection View
var collectionView = new Drupal.Backbone.Views.CollectionView({
  collection: collection,
  templateSelector: '#backbone_munich_collection_template',
  renderer: 'twig',
  el: '#backbone-munich-collection-render-app',
  ItemView: NodeView,
  itemParent: 'ul.search-results'
});

// Render view (shell, items will attach on collection "add" event)
collectionView.render();
// Fetch collection, items automatically rendered into list!
collection.fetch();

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

<?php
function backbone_example_menu() {
  $items['backbone_example'] = array(
    'title' => 'Backbone Example',
    'page callback' => 'backbone_example_admin_page',
    // ...snip...
  );
  return $items;
}
?>

Page Callback: Includes Backbone Lib and App JS

<?php
function backbone_example_admin_page() {
  // Include libs
  drupal_add_library('backbone', 'drupalbackbone-services');
  drupal_add_library('backbone', 'twig.js');
  // Add templates to page.
  backbone_add_template('backbone_munich_node_event_bind_template', theme('backbone_munich_node_event_bind_template'));
  // Add app js.
  drupal_add_js(drupal_get_path('module', 'backbone_munich') . '/js/collection_event_bind.js');
  // ...*snip*...
}
?>

JS: Use Behaviors for App

(function ($){
  Drupal.behaviors.backbone_munich = {
    attach: function() {
       // Load a node
      var myNode = new Drupal.Backbone.Models.Node({
	nid: 1
      });
    }
  };
})(jQuery);

Make a root element for our app

<?php
function backbone_example_admin_page() {
  // ...snip...
  return array(
    '#type' => 'html_tag',
    '#tag' => 'div',
    '#attributes' => array(
      'id' => 'backbone-example-app',
    ),
  );
}
?>

Use the theme layer for templates

<?php
function backbone_example_theme($existing, $type, $theme, $path) {
  return array(
    'backbone_example_node_template' => array(
      'variables' => array(),
    ),
    'backbone_example_app_template' => array(
      'template' => 'backbone-example-app-template',
      'variables' => array(),
    ),
  );
}
?>

Added advantage that we can use t()

<?php
<article>
    <header>
        <title>
          {{ title }}
        </title>
        {# Add a button element to toggle promote status #}
        <button value="<?php t('Promote'); ?>'" class="promote-toggle"/>
    </header>
    <div class="body">
      {{ body }}
    </div>
</article>
?>

One more demo...

ShotClip

By Cormac McGuire (cromac) / Studio Rua

WAIT!

We want to know what you thought about this session:

Find this session on the DrupalCon Munich site:

http://munich2012.drupal.org/program

And click the "Take the Survey" link.

(and message us on Drupal.org or Twitter!)

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

Thank you!

← → #