BackboneJS - Not able to update the Collection URL dynamically

Question

I am trying to produce the mock data to my applicaiton. according to the requirements my user can set the size of the json. for that, I am taking the user to new page and getting a value from user. say small, medium, large. once the size defined by user, I am updating the url link of my collection like this :

var api = "movies"; //default. later setting by dynamic

    var getURL = function( size ){

        console.log('api is', api);

        return api;

    }

    var Theater = {
        Models: {},
        Collections: {},
        Views: {},
        Templates:{}
    }

    Theater.Models.Movie = Backbone.Model.extend({});

    Theater.Collections.Movies = Backbone.Collection.extend({
        model: Theater.Models.Movie,
        urlRoot : getURL(),
        url : function(){
            console.log( "json from",  "scripts/data/" + this.urlRoot+".json" );
            return  "scripts/data/" + this.urlRoot+".json"; //dynamic
        },
        initialize: function(){
            console.log("Movies initialize");
        }
    });

here is the view part :

 Theater.Templates.simulator = _.template($("#tmplt-simulator").html());
    Theater.Views.Simulator = Backbone.View.extend({
        el: $("#mainContainer"),
        events :{
            "click .radioBtn" : "setDataSize"
        },
        template : Theater.Templates.simulator,
        initialize: function () {
            _.bindAll(this, 'render');
            this.render();
        },
        render: function () {
            this.$el.empty();
            return $(this.el).append(this.template()) ;
        },

        setDataSize : function(e){
            e.preventDefault();
            var size = e.target.value;
            api = size; //updating the URL but not working when go back to home
        }

    })

apart from above details here is the full code : full code

any one help me to handle this scenario?

thanks in advance.

Answer 1

Collection don't really have a built in urlRoot property that is handled by Backbone. So what you're defining is a custom property that is only evaluated once when the collection constructor is created.

What you should do is:

url: function(){
    return  "scripts/data/" + getURL() + ".json";
    // ------------------------^ something that is actually dynamic
},