BackboneJS Render Template

BackboneJS Render Template

HTML

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

		<script type="text/template" id="dimensions-template">
	      <% _.each(dimensions, function(dimension,i){ %>

	          <%- dimension.get('dimensionName') %> <select id="<%- dimension.get('dimensionName') %>">
	          	<option>Select</option>
	          	<%  _.each(dimension.get('refinements'), function(ref,x){ %>
	          		<option data-refineurl='{
	          		"refinementUrl": "<%- ref.refinementurl %>",
	          		"nVal": "<%- ref.nval %>"
	          	}'><%- ref.name %></option>
			    <% }); %>
	          </select>

	      <% }); %>
		</script>

	</div>

JavaScript

(function () {

	var DimensionsModel = Backbone.Model.extend({

		defaults: {
			dimensionName : 'undefined',
			refinements : 'undefined'
		}

	});

	var DimensionsCollection = Backbone.Collection.extend({
		model: DimensionsModel,

		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 (options) {
			this.listenTo(this.model,'change', this.render);

			this.model.fetch({
				beforeSend: setHeader
			});

			console.log(this.model);

			return this;
		},

		render: function () {
            console.log(this.template(this.model, 'dimensions-template'));
			this.$el.html( this.template(this.model, 'dimensions-template') );
		},

		template: function (models, target) {
			var templateSelectors = _.template($('#'+target).html(),{
				dimensions: this.model.toJSON()
			});

			return templateSelectors;
		},


	});


	var myCollection = new DimensionsCollection();
	var myView = new DimensionsView({model: myCollection});

}());