_templates.haml

%script{ :type => 'text/x-handlebars-template', :name => 'PerformanceView' }
  %li.calendar
    %span.time {{timeOfDay}}
    %span.day_of_week {{day}}
    %span.day {{shortDate}}

application.coffee

log = (message) ->
  console.log message

#helpers

formatTime = (d) ->
  hrs = d.getHours()
  isAfternoon = hrs >= 12
  hrs -= 12 if hrs > 12
  "#{hrs}:#{d.getMinutes()}#{'p' if isAfternoon}"
  

# parent view class
    
class TemplateView extends Backbone.View
  
  loadTemplate: ->
    @template ?= Handlebars.compile $("script[name=#{@templateName}]").html()

  render: ->
    @loadTemplate()
    $(@el).html(@template(@model))
    this

# models

class Performance extends Backbone.Model
  
  start: -> new Date @get('start_time')
  startFormatted: (format) -> $.datepicker.formatDate(format, @start())
  day: -> @startFormatted('D')
  month: -> @startFormatted('M')
  shortDate: -> @startFormatted('M d')
  timeOfDay: -> formatTime(@start())
  
  view: ->
    new PerformanceView(model: this)

# views

class PerformanceView extends TemplateView  
  templateName: 'PerformanceView'
  
  events: 
    'click' : 'logInfo'
    
  logInfo: -> log @model.start()

# templates

p1 = new Performance start_time: "2010-11-08T14:30:00-08:00"
# log p1.view().render().el

$(document).ready -> $('#main').empty().append p1.view().render().el