BackboneJS Update Ajax URL Parameters On Change

BackboneJS Update Ajax URL Parameters On Change

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">

	</div>

	<script type="text/template" id="dimensions-template">
      <% _.each(dimensions, function(dimension,i){ %>
          <div>
          <%- 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>
          </div>
      <% }); %>
	</script>

JavaScript

(function () {

	var DimensionsModel = Backbone.Model.extend({

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

	});

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


		url: 'http://solutionstest.3m.com/wps/PA_SnapsPortlet_Ram/AjaxServlet?gblid=1273672875186&rt=sel&usage=ss&plmlblid=1319222425521&plmid=Z7_RJH9U52300FC40IQG8LGQL1TP7&pid=7BC6E48B180001C680543909724BA0D4&loc=en_US&includeRecords=false&resultsPerPage=0&baseN=4293413541&N=4293413541&_=1394220823763',

		parse: function (response) {
			//console.log(response);

			var dimensionsArray = [],
				dimensions = response.dimensions,
				dimensionsLength = dimensions.length;

			for (var i = 0; i < dimensionsLength; i++) {
				var refinements = dimensions[i].refinements,
					refinementsLength = refinements.length,
					refinementsArray = [];
				for (var x = 0; x < refinementsLength; x++) {
					refinementsArray.push({
						name: refinements[x].name,
						refinementurl: refinements[x].refineUrl,
						nval: refinements[x].id
					});
				}

				dimensionsArray.push({
					dimensionName : dimensions[i].name,
					refinements: refinementsArray
				});
				
			}

			return dimensionsArray;
		}

	});

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

		initialize: function (options) {
			this.render();
			return this;
		},

		/*
		 * models - parameter of the data from the Collection.
		 * target - ID of Underscore Template that should be used.  Must be a string.
		 */
		template: function (models, target) {
			console.log(models);

			var templateDropDown  = _.template($('#'+target.toString()).html(),{
				dimensions: models
			});

			return templateDropDown ;
		},

		render: function () {
			var that = this;
			var dimensionCollection = new DimensionsCollection();
			dimensionCollection.fetch({
				dataType: 'jsonp',
				jsonp:'jsonp',
				jsonpCallback: 'dropDownSelectorInit',
				success: function (data)...