BackboneJS Update Ajax URL onChange

BackboneJS Update Ajax URL onChange

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){ %>
            <div>
	          <%- dimension.name %> <select id="<%- dimension.name %>">
	            <option>Select</option>
	          	  <%  _.each(dimension.refinements, function(ref,x){ %>
	          	    <option data-options='{
	          		  "refineUrl": "<%- ref.refineUrl %>",
	          		  "id": "<%- ref.id %>"
	          	    }'><%- ref.name %></option>
			      <% }); %>
	          </select>
            </div>
	      <% }); %>
		</script>

	</div>

JavaScript

(function () {

	var DimensionsModel = Backbone.Model.extend();
    
	var setHeader = function (xhr) {
		xhr.setRequestHeader('JsonStub-User-Key', 'cec1b70c-a41f-4e03-864b-1f0c6e03718a');
		xhr.setRequestHeader('JsonStub-Project-Key', 'f3abf4b2-9282-413d-b302-7737638f0ea8');
	};

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

		url: 'http://jsonstub.com/spreadsheet',
        
        parse: function(response) {
            console.log('response = ', response);
            console.log('response.dimensions = ', response.dimensions); 
            return response.dimensions;
        }
	});
    
    var dimensionsCollection = new DimensionsCollection();

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

		initialize: function (options) {
            var self = this;
            
            this.collection.fetch({
                beforeSend: setHeader,
                success: function () {
                    self.render();
                }
            });

			return this;
		},

		render: function () {
            console.log( this.collection );
            //console.log( this.collection.get('name') );
			console.log( this.collection.toJSON() ); //Why does this return an empty array???
            
            var template = _.template( $('#dimensions-template').html(), { dimensions: this.collection.toJSON()});
            
            this.$el.html(template);
            
            this.changeIt();
            
			return this;
		},
        
        changeIt: function () {
            this.$el.find('select').change(function () {
                //refineUrl grabs the value of the paraemeter to append to the Collection.url
                var refineUrl = $(this).find('option:selected').data().options.refineUrl;
                console.log(refineUrl);
                //Once an option is selected update the Collection.url and
                //re-render the page based off of new data.
            });
       ...