public
Last active

backbone based mobile page model

  • Download Gist
pageview.js.coffee
CoffeeScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103
#=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

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.