A Backbone.js Playground

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

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>
<html>
    <body>
        <div id='container'></div>
    </body>
</html>

JavaScript

function viewFactory(view, viewOptions) {
    $('#container').append('<div>new view created</div>');
    return new view(viewOptions);
}

AView = Backbone.View.extend({
    initialize: function() {
        _.bindAll(this, 'render');
    },
    
    render: function() {
        $(this.el).html('Name: ' + this.model.get('name'));
        return this;
    }
});

BView = Backbone.View.extend({
    initialize: function() {
        _.bindAll(this, 'render');
    },
    
    render: function() {
        $(this.el).html('City: ' + this.model.get('city'));
        return this;
    }
});

var person = new Backbone.Model({name: 'Paul'});
var aview = viewFactory(AView, { model: person });
$('#container').append(aview.render().el);

var person2 = new Backbone.Model({city: 'Omaha'});
var bview = viewFactory(BView, { model: person2 });
$('#container').append(bview.render().el);