Skip to content

Instantly share code, notes, and snippets.

@boy-jer
Forked from bradphelan/pageview.js.coffee
Created August 25, 2011 04:34
Show Gist options
  • Save boy-jer/1169985 to your computer and use it in GitHub Desktop.
Save boy-jer/1169985 to your computer and use it in GitHub Desktop.
backbone based mobile page model
#=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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment