backbone based mobile page model

pageview.js.coffee

#=require haml
#=require backbone
class PageView extends Backbone.View

  tag: "div"

  class: "page"

  classes: ->
    []

  viewdata: -> {}

  inner_html: ->
    @template(@viewdata())

  render: ->
    super
    console.log "rendering #{@.constructor.name}"
    for c in @classes()
      $(@el).addClass(c)

    $(@el).addClass("page")
    $(@el).html(@inner_html())

    footer = @$('footer').hide()

    if @model != null
      # Iterate through all bindings
      for selector, field of @modelBindings
        do (selector, field) =>
          console.log "binding #{selector} to #{field}"
          # When the model changes update the form
          # elements
          @model.bind "change:#{field}", (model, val)=>
            console.log "model[#{field}] => #{selector}"
            @$(selector).val(val)

          # When the form changes update the model
          [event, selector...] = selector.split(" ")
          selector = selector.join(" ")
          @$(selector).bind event, (ev)=>
            console.log "form[#{selector}] => #{field}"
            @model.set_field field, @$(ev.target).val()

          # Set the initial value of the form
          # elements
          console.log "#{field}:#{@model.get(field)} -> #{selector}"
          @$(selector).val(@model.get(field))
    @

  modelBindings: []

  beforeEntry: ->

  afterEntry: ->

  show: ->
    doShow = (oldPage)=>
      $("body.container").html($(@el))
      @transplantFooter()
      $(@el).show 0
      @beforeEntry()
      opts =
        mode: "show"
        direction: "right"
        easing: "easeInOutCubic"
      $(@el).effect "slide", opts, 500, =>
        @afterEntry()

    # Hide everything else and 
    # then show the current page
    oldpage = $("div.page")
    if oldpage.size() > 0
      opts =
        mode: "hide"
        direction: "left"
        easing: "easeInOutCubic"
      oldpage.effect "slide", opts, 500, =>
        doShow()
    else
      doShow()

  # This moves the footer out of the
  # 'page' and into the body so the
  # compass sticky-footer plugin can
  # work with it
  transplantFooter: ->
    footer = @$('footer').detach()
    footer.show()
    $("body > footer").remove()
    footer.appendTo("body.container")
    $("<div class='footer_hack_footer'/>").appendTo($(@el))


  switchToPage: (page) ->
    PageView.switch(page)

  @switch: (page) ->
    page.render()
    page.show()

window.PageView = PageView