extend model defaults

To avoid Car.prototype.defaults and Hatchback.prototype.defaults having the same reference, its necessary to override the reference in the subclass (we do this using _.defaults)

by mattfreer

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.1.7/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.5.3/backbone-min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-1.1.1.min.css">
<script type="text/template" id="car-default-template">
    <h2>Car details:</h2>
    <ul>
        <li>Description: <%= description %></li>
        <li>Doors: <%= doors %></li>
        <li>Gears: <%= gears %></li>

    </ul>
</script>
        
<div id="car"></div>

CSS

body {
    padding: 1em;
}

JavaScript

var Car = Backbone.Model.extend({
    defaults: {
        description: "Saloon",
        gears: 5,
        doors: 4
    }
});

var HatchbackCar = Car.extend({
    defaults: {
        description: "Hatchback",
        doors: 3
    }
});
// Uses _.defaults to allow the overriding of default values in subclass
_.defaults(HatchbackCar.prototype.defaults, Car.prototype.defaults); 

var CarView = Backbone.View.extend({
    el: $('#car'),
    template: _.template($('#car-default-template').html()),

    initialize: function() {
        _.bindAll(this);
        this.render();
    },
    render: function() {
        $(this.el).html(this.template(this.model.toJSON()));

    }
});

var carView = new CarView({
    model: new HatchbackCar()
});