You have to fetch your model :
$(function() {
var CalendarApp = Backbone.View.extend({
el: $('#wrap'),
initialize: function(){
this.headerModel = new HeaderModel();
this.headerView = new HeaderView({
model: this.headerModel,
el: $('header')
}); // semicolon here
this.headerModel.fetch(); // Here
this.monthView = new MonthView({
el: $("#calendarView")
}); // semicolon here
}
});
var calendar = new CalendarApp;
});
Your problem is that in your HeaderModel.js
you are instantiating your model and fetching it, so your model will be populated with your json file and that's it.
In your HeaderView.js
your are affecting your model to the view class, nothing more, the view initialize
and render
functions are not yet called.
In your app.js
when you instantiate your view
this.headerView = new HeaderView({
model: this.headerModel,
el: $('header')
})
your are overriding the previously set model with a new one this.headerModel
so when the initialize
and render
are executed your new model this.headerModel
is empty.