A Backbone.js Playground

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

by aedry

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="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<button id="yeah">Click Me</button>
<div id="content"></div>

CSS

li {
    padding: 5px;
    margin: 5px;
    background-color: rgb(240,240,240);
    border: 1px rgb(200,200,200) solid;
    border-radius: 5px;
    list-style-type:none;
}

button {
    padding: 5px;
}

JavaScript

$(document).ready(function () {

    YeahView = Backbone.View.extend({
        events : {
            'click #yeah' : 'affYeah'
        },
        affYeah : function () {
            $('#content', this.el).append('<li>Yeah It\'s work ! Great work, thanks :)</li>');  
        }
    });

    new YeahView({ el : $('body') });

});