BackboneJS Render Template - Fork 1

BackboneJS Render Template - Fork 1

by Nirvanachain

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('Name') %> <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({});


	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 dimensionModel1 = new DimensionsModel();

	var dimensionCollection1 = new DimensionsCollection([dimensionModel1]);

    dimensionCollection1.fetch({beforeSend: setHeader, async: false});

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

		initialize: function (options) {
			this.listenTo(this.model,'change', this.render);
			console.log(this.model);
			this.render();

			return this;
		},

		template: _.template( $('#dimensions-template').html() ),

		render: function () {
			var template = _.template( $('#dimensions-template').html(), {dimensions: this.model.models});

			this.$el.html(template);

			return this;
		},

	});

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

}());