How to pass variable instead of url in Backbone.Collection

Question

I try to pass my data into Backbone.Collection without using url. I just have a response with array of objects and what I need is to pass a variable into url. But url is a path in a working directory to a json file or a url to the server. So how can I pass my variable instead of url?

    var test = [{
        "name": "Afghanistan",
        "url": "http://en.wikipedia.org/wiki/Afghanistan",
        "pop": 25500100,
        "date": "2013-01-01",
        "percentage": 0.36,
        "id": 1
    }, {
        "name": "Albania",
        "url": "http://en.wikipedia.org/wiki/Albania",
        "pop": 2831741,
        "date": "2011-10-01",
        "percentage": 0.04,
        "id": 2
    }];

    var Territory = Backbone.Model.extend({});

    var Territories = Backbone.Collection.extend({
        model: Territory,
        url: "scripts/test.json" // there should be pass to my variable "test" 
    });

You need a path that can be retrieved using a HTTP request. If you are just testing locally, you can simply instantiate the collection with models, or if you are mocking, then it might be easiest to overwrite the `fetch` method — mikeapr4, Oct 18 '16 at 16:19
Wouldn't `var territories = new Territories(test)` do the trick? — mu is too short, Oct 18 '16 at 16:22

score 2 · Accepted Answer · answered Oct 19 '16 at 09:37

You can overwrite fetch method and set data into this one.

var testMocks = [/* ... */];

var Territory = Backbone.Model.extend({});
var Territories = Backbone.Collection.extend({
    model: Territory,
    url: testMocks, // there should be pass to my variable "test" 

    fetch: function(options) {
        var options = options || {};
        var response = this.url;

        // Do the same as the fetch method does when the data received
        this.set(this.parse(response, options), options);

        if (typeof options.success === 'function') {
            options.success(this, response, options);
        }

        // Returns deferred as the original fetch
        return Backbone.$.Deferred().resolve();
    },
});

// ...

var collection = new Territories();
collection.fetch();

console.log(collection.length); // 2
console.log(collection.first().get('name')); // "Afghanistan"

If you want to use save/destroy methods also (to test for example), you can use sinon fake server.

score 1 · Answer 2 · edited May 23 '17 at 12:16

As mu is too short hinted in a comment, If you want to initialize a collection form an array of values rather than a URL, you can just pass the array of values to the collection's constructor. The values should convey the same structure as the JSON that the collection would expect from a server.

Taking your code, I just need to add:

var territories = new Territories(test);
console.log(territories.at(0).attributes);
console.log(territories.at(1).attributes);

Here's a snippet illustrating. When you run it, you'll see on the console the attributes for the 1st and 2nd model stored in the collection.

var test = [{
  "name": "Afghanistan",
  "url": "http://en.wikipedia.org/wiki/Afghanistan",
  "pop": 25500100,
  "date": "2013-01-01",
  "percentage": 0.36,
  "id": 1
}, {
  "name": "Albania",
  "url": "http://en.wikipedia.org/wiki/Albania",
  "pop": 2831741,
  "date": "2011-10-01",
  "percentage": 0.04,
  "id": 2
}];

var Territory = Backbone.Model.extend({});

var Territories = Backbone.Collection.extend({
  model: Territory,
  url: "scripts/test.json" // there should be pass to my variable "test" 
});

var territories = new Territories(test);
console.log(territories.at(0).attributes);
console.log(territories.at(1).attributes);

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>

score 0 · Answer 3 · answered Oct 19 '16 at 12:07

You can use initialize: function. You can do it like this .

var Territories = Backbone.Collection.extend({
    model: Territory,
    initialize: function(options) {
        this.id = options.id;
        this.url = options.url;
    },
    url: function(){
        return this.url+'/'+this.id;
    }   

});
var collection = new Territories({id: 125, url: 'http://anything.somthing'})
collection.fetch();

You need read more backbone documentation. http://backbonejs.org/

How to pass variable instead of url in Backbone.Collection

3 Answers3