A Backbone.js Playground

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

by raam86

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="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
<script src="http://code.jquery.com/qunit/qunit-1.15.0.js"></script>
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.15.0.css">
<section id="container1">
    <div id="container2"></div>
</section>
        
        <div id="qunit"></div>
<div id="qunit-fixture"></div>

CSS

.boxes:hover {
    border:5px solid #000
}
.medium_border {
    border:10px solid #000
}
.thick_border {
    border:15px solid #000
}
#container1{
max-width:960px
}
#container2{
    
    margin:100px
}

JavaScript

$(document).ready(function () {
     var Box = Backbone.Model.extend({

         getNeigbors: function () {}

     });
     var b = new Box({
         header: "I am a header",
         body: "And I am the body"
     })
     console.log(b)

     var BoxView = Backbone.View.extend({
         tagName: "div",
         className: "boxes",
         events: {
             "click": "add",
             "mouseenter": "borderOn",
             "mouseleave": "borderOff"
         },
         /*template: _.template(...),*/
         render: function () {
             this.$el.html("<h1>" + this.model.attributes.header + " " + this.model.cid + "</h1>");
             return this;
         },
         add: function () {
             var b = new Box({
                 header: "I am a header",
                 body: "And I am the body"
             })
             var bv = new BoxView({
                 model: b,
                 id: b.cid + "-box"
             }).render()
             window.containers[1].appendChild(bv.el)
         },
         borderOn: function () {
             window.containers[0].classList.add("thick_border")
             window.containers[1].classList.add("medium_border")
         },
          borderOff: function () {
             window.containers[0].classList.remove("thick_border")
             window.containers[1].classList.remove("medium_border")
         }
     });
     var AppView = Backbone.View.extend({
         el: "#container2",
         //  template: _.template(...),
         render: function () {
             this.$el.html("<h1>" + "Welcome to app" + "</h1>");
             var _1 = document.getElementById("container1"),
                 _2 = document.getElementById("container2")
                 window.containers = [_1, _2]
             return this;
         }

     });



     QUnit.test("Box Rendering", function (assert) {
         //Setup    
         var av = new AppView().render()
         var bv = new BoxView({
             model: b,
        ...