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">
 <div id="qunit"></div>
  <div id="qunit-fixture"></div>
<div id="app"></div>

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",
         events: {
             "click": "add"
         },
         /*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.id + "-box"
             }).render()
             document.body.appendChild(bv.el)
         }
     });
     var AppView = Backbone.View.extend({
         el: "#app",
         //  template: _.template(...),
         render: function () {
             this.$el.html("<h1>" + "Welcome to app" + "</h1>");
             return this;
         }
     });


     var av = new AppView().render()
     var bv = new BoxView({
         model: b,
         id: b.cid + "-box"
     }).render()
     document.body.appendChild(bv.el)
     
     QUnit.test("Box Rendering",function(assert){
     //Setup    
     var av = new AppView().render()
     var bv = new BoxView({
         model: b,
         id: b.cid + "-box"
     }).render()
     document.body.appendChild(bv.el)
     var box = document.getElementById(b.cid + "-box")
     assert.ok(box,"Box rendered")
     var header_content =   b.attributes.header + " " + b.cid 
     assert.equal(box.getElementsByTagName("h1")[0].innerText,header_content,"Header rendered")
     
     })
 });