Gunther
Introduction
Gunther is a view and templating tool for Backbone. Its provides a powerful and flexible way to create views, based on Backbone Models and Collections, supporting live bindings and expressive syntax.
Gunther's templates are never compiled or interpreted. The templates are "live" functions, that retain their parent scope. Because they are based in code, not interpreted strings, they are easily maintained with the rest of application code.
Concise
The templates are based on a simple DSL. Gunther is written to make maximum use CoffeeScript's notation, combined with CSS inspired element creation.
template = -> # Elements are created using a simple DSL @div -> @p 'This is some text' @p 'This is some more text' # For more fine-grained creation, you can use @element() # This method accepts ID's, classes, attributes and properties in a # CSS-like syntax @element 'p#has-an-id' @element 'p.has-a-class' @element 'input[type=checkbox]:checked' # IDs, classes, attributes, and properties can be chained @element 'input[type=checkbox]#foo.bar.baz:checked' # Content can be expressed functionally @text -> "I can count to 10! " # Events can be handled inline, without losing scope @on 'click' someModelset foo: 'bar'Live Bindings
Gunther can bind any model attribute to DOM elements, classes, attributes and properties, allowing for live updating views.
template = @div-> # Toggle a class depending on a model's attribute @toggleClass 'foo'model'foo' # Toggle a class using a generator @toggleClass 'bar'model'bar' modelget 'bar' is 'bar' # Bind text to a model's attribute @boundText model'foo' # Bind DOM attributes to a model @boundAttribute 'src' model'source' # Bind DOM properties to a model @boundProperty 'checked' model'selected' # Change a style property with a model's attribute @boundCss 'color'model'foo' if modelget 'foo' is 'foo' then '#FF0000' else '#0000FF'List views
List views allow you to set up repeated views for items from a collection. The list is automatically pruned and sorted when the underlying collection is modified.
template = @list 'ul'collection @li itemget 'foo'Extensibility
Gunther supports partials, so it's easy to create re-usable components. Templates can also be composed out of sub-templates.
# A button partial, complete with handler GuntheraddPartial 'button' @a -> @text text @on 'click'handler template = -> # Button @button 'Click me!' alert 'I was clicked!' # Render another template inside this one @subTemplate someOtherTemplateRendering
Rendering a template is easy:
template = -> @div 'This is text from a Gunther template' templaterenderInto $ '#your-element'Gunther's templates integrate easily with Backbone's views:
# The view's template @template: @element 'div'-> modelget 'foo' # Use the render method to render the template into the view's element : -> FooViewtemplaterenderInto @$el@model