Backbone Testing Ground

by Julian

HTML

<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone.js"></script>
<div id="xxx"></div>

CSS

#xxx {
    width: 300px;
    height: 300px;
    background-color: yellow;
}

.outer {
    width: 200px;
    height: 200px;
    background-color: green;
}

.inner {
    width: 100px;
    height: 100px;
    background-color: red;
}

JavaScript

function logOutput(output) {
    $('body').append("<b>&gt</b> " + output + "<br />");
}

var Model = Backbone.Model.extend({});

var Collection = Backbone.Collection.extend({
    model: Model
});

var collection = new Collection([{
    name: "Julian"
}, {
    name: "Karl"
}]);

logOutput(collection.pluck("name"));

collection.at(0).on("change", function(event, param) {
    logOutput("model changed: " + event + ", " + param);
    console.log("model changed: ", event, param);
});

collection.on("change", function(event, param) {
    logOutput("collection changed: " + event + ", " + param);
    console.log("collection changed: ", event, param);
});

collection.on("change:name", function(event, param) {
    logOutput("collection changed (name): " + event + ", " + param);
    console.log("collection changed (name): ", event, param);
});

collection.at(0).set("name", "Julian the King");

var View = Backbone.View.extend({

    events: {
        'click .outer': 'click'
    },                
    initialize: function() {
        this.render();
    },
    render: function() {
        $(this.el).html("<div class='outer'><div class='inner'></div></div>");
        return this;
    },
    click: function(event) {
        console.log("click", event, event.currentTarget);
    }
});

var view = new View({
    el: '#xxx'
});

var DerivedModel = Backbone.Model.extend({});

var model = new Model({name: "Julian"});
var derivedModel = new DerivedModel({m: model});
logOutput("derived model: name = " + derivedModel.get("m").get("name"));

model.on("all", function(eventName, obj, value) {
    logOutput("event: " + eventName + " for object " + obj + "(value:" + value + ")");
    derivedModel.trigger.apply(derivedModel, arguments);
});

derivedModel.on("change:name", function(obj, value) {
    logOutput("derived model has changed: " + value);
});

model.set("name", "Karl");