Gunther is a templating drop-in for Backbone.js
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.
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'
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 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'
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 handlerGuntheraddPartial 'button'@a ->@text text@on 'click'handlertemplate = -># Button@button 'Click me!' alert 'I was clicked!'# Render another template inside this one@subTemplate someOtherTemplate
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