Myelin links Backbone.js models to document objects through Views using Handlers.

Red Input syncs on keyup events.

Green Input syncs on change events.

Blue Button uppercases the model's field.

# This is a handler, used to specify complex behavior.
# We'll be using this one for the blue button.
class Uppercaser extends myelin.Button
  clean: (str) -> str?.toUpperCase()

# A myelin.View is a Backbone.View with a 'sync' field.
# The 'sync' specifies how we link documents to models.
class IntroView extends myelin.View
  sync:
    field: [            # sync to the 'field' attribute
      'keyup input.red' # use keyup for the red input
      'input.green'     # use the defaults for green
      {selector: 'button.blue', handler: Uppercaser}
      'span.cyan'       # use the defaults for cyan
    ]

# The view must have both 'el' and 'model'.
@introModel = new Backbone.Model
@introView = new IntroView el: '#intro', model: introModel

Cyan Span reacts to model change.

This is myelin. It syncs your DOM elements with your Backbone.js Models.

If you're interested, check out the documentation.

If you're feeling bold, or if you want to pick up some advanced tips and tricks, check out the annotated source.

If you're not convinced yet, read on!

Myelin works just as you'd expect. Let's break down the example above a bit.

myelin.View is a subclass of Backbone.View. It has a model attribute which it synchronizes data to. It uses a sync object to link document elements to this model.

The sync element is usually of the form {attribute: selector} or, as in the example above, {attribute: [selector]}. Myelin is pretty smart about detecting what type of behavior you want from the selector alone, but you can override all of myelin's guesses pretty easily.

One of the simplest overrides is changing the event that triggers synchronization. Just put an event in front of your selector and you're done. In the above example, Green Input uses the myelin default Handler, which synchronizes on the change event. Red Input uses the keyup event instead.

If you need even more flexibility, you can define your own handler and override the get, set, clean, and render functions, as Blue Button does above.

Myelin is a very intelligent linker. All links are defined within the view's el. Links are also delegated, so any dynamically added elements will automatically be synced. You can switch out the model or the el at any time, but you have to call view.link() to update all of the links.

If you don't provide your own handler, Myelin dynamically chooses one for you. Myelin handles checkboxes, radio buttons, submit buttons, and so on with some sensible defaults. Myelin also chooses handlers dynamically at event time. That means that you could say sync: {field: '.username'}, and the Input handler will be used for input.username while the Span handler will be used for span.username.

Myelin is built with the lovable coffeescript and makes use of the incredible underscore.js. Obviously, myelin couldn't exist withuot backbone.js. If you want to learn more, the documentation and annotated source are waiting.

Have fun, log bugs, send feedback!