How to display all attributes of model subclass on first initialization? - backbone.js

Question

Problem
When a child model is initialized for the first time, only defaults of the child are set as attributes.
When a second(and all subsequent) child is being initialized, the attributes of child display defaults of child and it's parent.
Fiddle
var Parent = Backbone.Model.extend({
defaults: {
name: "john",
lname: "smith",
age: 30,
language: "english",
location: "belgium"
}
});
var Child = Parent.extend({
defaults: {
hobby: "doing nothing",
age: 24,
occupation: "student"
},
initialize: function () {
this.constructor.__super__.initialize.apply(this, arguments);
_.defaults(this.defaults, this.constructor.__super__.defaults);
console.log(this.attributes);
}
});
attributes of child initialized for the first time :
var child1 = new Child();
child1.attributes :
hobby: "doing nothing"
age: 24
occupation: "student"
attributes of same Child class, initialized for the second time:
var child2 = new Child();
child2 attributes:
age: 24
hobby: "doing nothing"
language: "english"
lname: "smith"
location: "belgium"
name: "john"
occupation: "student"
Question
Why are not all defaults(child's and parent's) are being set as attributes when a child model is initialized for the first time ?
Because i've to display a Backbone.Collection inside a <ul> and every model's attributes are configurable through a html form inside each <li>. But because of this problem, i can't get to all attributes of the first model in the collection.

Answer 1

You're modifying the Child class's defaults object when the first object is instantiated, during its initialize method. At that point, the Backbone.Model constructor has already used defaults to fill in the attributes for that object, so it will only affect subsequent instantiations.
Take a look at Backbone.Model:
var Model = Backbone.Model = function(attributes, options) {
var defaults;
var attrs = attributes || {};
options || (options = {});
this.cid = _.uniqueId('c');
this.attributes = {};
_.extend(this, _.pick(options, modelOptions));
if (options.parse) attrs = this.parse(attrs, options) || {};
if (defaults = _.result(this, 'defaults')) {
attrs = _.defaults({}, attrs, defaults);
}
this.set(attrs, options);
this.changed = {};
this.initialize.apply(this, arguments);
};
initialize is the very last step, after the defaults have been set, so modifying defaults at that point won't do anything for the current object.
To get it to work how you want, modify defaults after you declare the class, rather than during initialize:
Child.prototype.defaults = _.defaults(Child.prototype.defaults, Parent.prototype.defaults);
Working example