BackboneUI done with CanJS

bbuicanjs.md

Button

<button><%= coffee.attr('roaster') %></button>

Checkbox

<input type='checkbox'
       <%= coffee.attr('acidic') ? 'checked' : '' %> /><%= coffee.attr('roaster') %>

Link

<a href="javascript://"><%= coffee.attr('roaster') %></a>

Textarea

<textarea><%= coffee.attr('region.name') %></textarea>

Text Field

<input type='text' value="<%= coffee.attr('roaster') %>"/> 

Pull down

Template:

<select class='pulldown'>
<% alternatives.each(function(item, index){ %>
  <option value="<%= index %>" <%= model.attr(content) == item ? "selected" : "">
    <%= item.attr(this.altLabelContent) %>
  </option>
<% }) %>
</select>

Pulldown = can.Control({
  init : function(){
    this.element.html( can.view('pulldowntemplate',this.options ) );
  },
  "change" : function(){
    this.options.model.attr(this.options.content, this.options.alternatives[this.element.val()] );
  }
})

List View

<% regions.each(function( region ) { %>
  <li><%== can.view.render("SUBTEMPLATE", region ) %></li>
<% }) %>