Backbone.js passing url parameter to collection

Question

I am using a test .json file and can console.log the url fine in the success, but I am trying to now append parameters to the url and they are being ignored.

This is what the view looks like, works fine and success message appears with a test json file:

busImportSearch: function() {
    importSelect.fetch({
        data: {
            importPhone: '5555555555',
            busImportName: 'test business',
            busImportCID: '12345',
            busImportBID: '1234567890'
        },
        success: function(results) {
            // url console.log's fine just no params
        }
    });
}

This is what I have in the collection:

var importSelect = Backbone.Collection.extend({
    model: importModel,

    url:'somepath/test.json',

    sync: function(method, model, options) {
        options.timeout = 10000;
    options.dataType = "json";
        return Backbone.sync(method, model, options);
    },

    parse: function(response) {
        console.log(this.url);
        if (typeof response.data !== 'undefined') {
            this.result = response.data.list;
         }
        return this.result;
     },
});

 return new importSelect;
});

Edit

I think this is working but I think there is a better way to do this:

url: function() {
  var busimportPhone = $("#busImportPhone").val();
  var busImportName = $("#busImportName").val();
  var busImportCID = $("#busImportCID").val();
  var busImportBID = $("#busImportBID").val(); 
  var updateUrl = 'test.json' + '?importPhone=' + busimportPhone + '&importName=' + busImportName + '&importCID=' + busImportCID + '&importBID' + busImportBID; return updateUrl;
},

Answer 1

This is not a whole lot better, but you could store the list of properties on the collection some where and create the url from there. Eg.

importSelect.myDataList = {
        importPhone: '5555555555',
        busImportName: 'test business',
        busImportCID: '12345',
        busImportBID: '1234567890'
    };
importSelect.fetch({ ... });

And construct your url using a function something like (code not tested)

function constructUrl(data) {
    var result = "";
    var count = 0;
    for(var i in data) {
       var prefix = "&";
       if(count == 0) {
           prefix = "?";
       }
       result += prefix + i + "=" + data[i];
    }
    return result;
}

and use function to create Url

...
url: function() { 
    return constructUrl(this.data);
}

hope that helps.

Answer 2

I think you're on the right path by defining the url function, just grab those query parameters from your collection, not directly from your page. The collection should be able to know what kind of items are loaded, so it makes sense to store query parameters with the collection instance somehow. In the past I've used an object in the Collection definition. But be careful, or you might end up with an object that's shared by all of those collection instances.

Side Note: I've been tempted before to set things up such that for any collection that could be generated from querying by various query parameters there would exist an associated model that only modeled the query parameters. Via event binding between the model and the collection, changing values of the model then could automatically trigger a fetch in the collection. But would that be a reasonable trigger? I'm not sure.