Sub template is not rendering using backbone and underscore

See more:

templates

underscore.js

, +

I have two templates (Header and Details) - Header contains some details and also on place holder for Details sections - Details contain some more details.
My problem is when i run application it will not replace Details template inside the placeholder of the Header.
View 1

var CalendarView = Backbone.View.extend({
        el: '#header',
        model: todo,
        initialize: function () {
            this.render();
            this.monthView = new MonthView({ el: "#dvDetail", model: this.model });
        },
        render: function () {
            template.render("testHeader.htm", $(this.el), { data: this.model.toJSON() });
        }
    });

View 2

var MonthView = Backbone.View.extend({
    initialize: function () {
        this.model.bind("change", this.render, this);
        this.render();
    },
    render: function () {
        template.render("testDetail.htm", $(this.el), { data: this.model.toJSON() });
    }
});

index.html

<div id="header"></div>

testHeader.htm

<div>This is header </div>
<div id="dvDetail">Sub template should be replace here...</div>

testDetail.htm

<div>This is details template and replaced on #dvDetail html</div>

When i run the application it will display
This is header
Sub template should be replace here...

I would require
This is header
This is details template and replaced on #dvDetail html

Can any body let me know what was missing in this code to get desired output? Any clue would be highly appreciated!