CODEWITHSUNDEEP
backbone.jsbackbone.js-collections
Кирилл Малыхин
Кирилл Малыхин

Reputation: 23

How to pass variable instead of url in Backbone.Collection

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" 
    });

Upvotes: 2

Views: 1495

Answers (3)

Louis
Louis

Reputation: 151401

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>

Upvotes: 1

V.S.V
V.S.V

Reputation: 302

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/

Upvotes: 0

saaaaaaaaasha
saaaaaaaaasha

Reputation: 393

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.

Upvotes: 2

Related Questions