Backbone Sub Views - this.$el not woring
Backbone Sub Views - this.$el not woring
HTML
<script src="http://underscorejs.org/underscore.js"></script>
<script src="http://backbonejs.org/backbone.js"></script>
<script type="text/template" id="parentTemplate">
<h1>hi</h1>
</script>
<div class="js-parent">
</div>
JavaScript
var TheModel = Backbone.Model.extend({
defaults: {
color: 'Red',
message: null,
endLine: null
}
});
var TheCollection = Backbone.Model.extend({
model: TheModel,
url: 'http://jsonstub.com/test/1'
});
var ParentView = Backbone.Model.extend({
el: '.js-parent',
initialize: function () {
this.collection = new TheCollection();
console.log(this.$el);
return this;
},
myTemplate: function (scriptID, data) {
var temp = _.template( $(scriptID).html(), {model: data} );
this.$el.html(temp);
return this;
},
render: function () {
var self = this;
this.collection.fetch({
type: 'GET',
beforeSend: function (request) {
request.setRequestHeader('JsonStub-User-Key', 'cec1b70c-a41f-4e03-864b-1f0c6e03718a');
request.setRequestHeader('JsonStub-Project-Key', 'ea6b0109-3612-4fc5-85f6-9dd8a31fe85b');
},
success: function (data) {
console.log( 'data =',data );
console.log( 'collection =',self.collection.toJSON() );
self.myTemplate('#parentTemplate', self.collection);
},
error: function () {
console.log('ERROR!!!');
}
});
return this;
}
});
var parent = new ParentView();
parent.render();