Boilerplate walkthrough for Stack View data types

gistfile1.js

(function($, window, undefined) {
  /*
     First we extend the defaults for the StackView options object.
     This is a common pattern in all the modules, (infinite, navigation),
     that each module extends the defaults to deal with the options that
     pertain to its own code.
  */
  $.extend(true, window.StackView.defaults, {
    selectors: {
      /* Our types only have this one extension, a selector that points to
      a unique selector for this type.  There isn't anything that actually
      uses this selector in the codebase (besides the test suite), but I
      see this being useful for other libraries to build on top of or use.
      For example, if you had a stack filter to only show selected media
      types, then these would come in handy. */
      webpage: '.stack-webpage'
    }
  });

  /* This register_type method is what adds a new type and is passed a
  type definition object.  Types are shared across all stacks on a page,
  ergo the static mathod on StackView instead of on an element. */
  window.StackView.register_type({
    /* The name property is just a unique identifier.  If you add another
    object with the same name it overrides the old type.  This becomes
    useful when you want to extend, modify, or blow away an existing type.
    More on that in another gist. */
    name: 'webpage',

    /* The match function takes a raw object from the docs array in data.
    We return true if and only if that object matches our type.  This tells
    the stack which object belongs to which type.  Going by the DPLA data
    this is fairly easy, since most types have a "format" property that is
    unique. */
    match: function(item) {
      return item.format === 'webpage';
    },

    /* The adapter gives us a step to transform the raw data object into an
    object we can use to render against a template.  For example, we're given
    back shelfrank but we need to translate that into a heat number.  For
    books we need to enfornce min/max values, check for missing measurements,
    and all sorts of other goodies before we pass the end result of that data
    to the template for rendering.  The method is given the raw item and the
    stack options specific to the stack its in (since multiple stacks on the
    same page could have different options).  The object we return gets
    passed directly into the template renderer. */
    adapter: function(item, options) {
      return {
        heat: window.StackView.utils.get_heat(item.shelfrank),
        link: item.rsrc_value,
        publisher: item.publisher,
        title: item.title
      };
    },

    /* The template for this data type.  Notice how the data names here match
    up to the property names of the object returned from the adapter. */
    template: '\
      <li class="stack-item stack-webpage heat<%= heat %>">\
        <a href="<%= link %>" target="_blank">\
          <span class="url-bar">\
            <span class="url-publisher"><%= publisher %>:</span>\
            <span class="url-title"><%= title %></span>\
          </span>\
        </a>\
      </li>'
  });
})(jQuery, window);