A Backbone.js Playground

A simple playground for learning backbone.js without having to install or configure anything yourself.

by erikcw

HTML

<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script src="https://raw.github.com/derickbailey/backbone.modelbinding/master/backbone.modelbinding.min.js"></script>
<script src="https://raw.github.com/derickbailey/backbone.memento/master/backbone.memento.min.js"></script>
<script src="https://raw.github.com/NYTimes/backbone.stickit/master/backbone.stickit.js"></script>
<form id="person-form">
    <label>Changing this doesn't change the text below</label>
    <input id="email-input">
</form>

<br>
<div id="person-desc">
    <div id="email-text"></div>
    <button id="manual-set">Set manually</button>
</div>

SCSS

* {
   margin: 10px;
}

CoffeeScript

Person = Backbone.Model.extend()
me = new Person({email: "[email protected]"})

FormView = Backbone.View.extend {
    el: $("#person-form")
    bindings: {
        "#email-input": { modelAttr: "email" }
    }
    
    render: ->
        this.stickit(me)

}

DescView = Backbone.View.extend {
    el: $("#person-desc")
    events: {
        "click #manual-set": "manual_set"
    }
    
    bindings: {
        "#email-text": { modelAttr: "email" }
    }
    
    render: ->
       this.stickit(me)
       
    manual_set: ->
       me.set("email", "[email protected]")

}

fv = new FormView().render()
other = new DescView().render()