BackboneJS Template

BackboneJS Template

HTML

<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
<div class="js-container">
    
</div>

JavaScript

(function () {

	var DimensionsModel = Backbone.Model.extend({

		url: 'http://jsonstub.com/calltestdata'

	});

	var setHeader = function (xhr) {
		xhr.setRequestHeader('JsonStub-User-Key', '0bb5822a-58f7-41cc-b8a7-17b4a30cd9d7');
		xhr.setRequestHeader('JsonStub-Project-Key', '9e508c89-b7ac-400d-b414-b7d0dd35a42a');
	};

	var DimensionsView = Backbone.View.extend({
		el: '.js-container',

		initialize: function () {
			var that = this;
			this.listenTo(this.model,'change', this.render);
			this.model.fetch({
				beforeSend: setHeader
			});
		},

		render: function () {
			console.log('inside render');
			console.log(this.model);
			console.log( this.model.get('dimensions').length );  //returns length of 3
			console.log( this.model.get('dimensions')[0].id ); //returns the id I expect

			var menu = '<select>';
			for (var i = 0, dimensionsLength = this.model.get('dimensions').length; i < dimensionsLength; i++) {
				console.log('ID = ' + this.model.get('dimensions')[i].id);
				menu += '<option>' + this.model.get('dimensions')[i].id + '</options>';

			}
			
			menu += '</select>';
			$(menu).appendTo(this.$el);

			return this;
		}
	});

	var myModel = new DimensionsModel();
	var myView = new DimensionsView({model: myModel});
	
}());