Assembler released

We just released Assembler – a plugin for Backbone that makes it easy to manage nested views.

Assembler was initially written to solve the need for rendering nested views server-side and re-attaching them client-side in a node.js/Backbone application. However, we also found it useful for quickly mocking up apps and prototypes as well, so we’ve decided to release it as a standalone library.

Overview

The API is inspired by Backbone‘s events definition, so creating layouts using Assembler looks like this:

var mainView = new Assembler.LayoutView({
    template: '<header><h1></h1></header> <div class="content"></div>',
    views: {
        'append header': navigationView,
        'inner .content': contentView
    }
});

mainView.render().$el.appendTo('body');

In the example above, append header is the destination and navigationView is the view instance to be inserted at the target selector.

Destinations

Destination strings are an insert method, optionally followed by a CSS selector that identifies the target element. If no target selector is provided, the view’s root element itself becomes the target; this is useful for creating flat lists.

The following insert methods are supported:

  • inner – Replaces the contents of the target element with the child view
  • outer – Replaces the target element with the child view
  • prepend – Inserts the child view at the beginning of the target element
  • append – Inserts the child view at the end of the target element
  • before – Inserts the child view before the target element
  • after – Inserts the child view after the target element

Dynamic Layouts

Child views can be added or removed programmatically using:

  • .addView(destination, view) – Adds a new child view to the layout
  • .removeView(destination) – Removes an existing child view from the layout
  • .swapView(destination, view) – Waits until the view to be inserted is ready to be rendered before removing the current child view from, and inserting the new child view into, the layout

Classes Overview

Assembler exposes the following classes:

  • Assembler.View – Implements basic API and rendering flow
  • Assembler.LayoutView – Used to create layouts
  • Assembler.ListView – Used to create lists and composite views (templated lists)

Setup

Download the latest release.

Install using npm:

$ npm install backbone-assembler

Install using bower:

$ bower install backbone-assembler

To find out more, check out the full documentation or have a look at the example project in the repo.

Happy coding!

Print Friendly

Leave a Reply