jQuery mobile + backbone.js

by Yoshiharu Kamata

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="https://raw.github.com/hongymagic/jQuery.serializeObject/master/jQuery.serializeObject.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="https://raw.github.com/jeromegn/Backbone.localStorage/master/backbone.localStorage.js"></script>
<section data-role="page" id="home">
<header data-role="header">
    <a href="#statistics" data-icon="info">Statistics</a>
    <h1>Home</h1>
    <a href="#add" data-icon="plus">Add</a>
</header>
<div data-role="content">
    <button class="list-btn">list</button>
</div>
<footer data-role="footer">
    <h1>Demo</h1>
</footer>
</section>
<section data-role="page" id="statistics">
<header data-role="header">
    <a href="#home" data-icon="home">Home</a>
    <h1>Statistics</h1>
</header>
</section>
<section data-role="page" id="add">
<header data-role="header">
    <a href="#home" data-icon="home">Home</a>
    <h1>Add</h1>
</header>
<div data-role="content">
    <form>
        <label>text:
            <input type="text" name="text" />
        </label>
        <fieldset data-role="controlgroup">
            <legend>radio:</legend>
            <label>radio1
            <input type="radio" name="radio" value="radio1" />
            </label>
            <label>radio2
            <input type="radio" name="radio" value="radio2" />
            </label>
            <label>radio3
            <input type="radio" name="radio" value="radio3" />
            </label>
        </fieldset>
    </form>
    <fieldset class="ui-grid-a submit">
            <div class="ui-block-a">
                <button type="submit" data-mini="true">Cancel</button>
            </div>   
            <div class="ui-block-b">
                <button class="submit-btn" type="submit"...

CoffeeScript

class Item extends Backbone.Model
class ItemList extends Backbone.Collection
  model: Item
  localStorage: new Store "demo"
class AddItemPage extends Backbone.View
  el: '#add'
  events: 
    "click .submit-btn": "addItem"
  addItem: ->
    console.log "addItem"
$ ->
  itemList = new ItemList
  new AddItemPage
  $(document).on "click", "#add .submit button", ->
    console.log $("#add form").serializeObject()
    itemList.create $("#add form").serializeObject()   
  $(document).on "click", "#home .list-btn", ->
    itemList.each (d)->
      console.log d.get "text"
  $(document).on "pageinit", "#add", ->
    console.log "pageinit"