收集-JSON响应的模型用法？

Question

Regarding the pattern Backbone uses for Collections and Models , I am not sure if what I am trying to achieve is possible.

I am wanting the Collection to act as a constructor by making a AJAX POST request to fetch JSON. Using that JSON response it will instantiate multiple models and add them to an array.

Each object has the attributes which will be stored in my model eg

    define([
    'underscore',
    'backbone'
], function (_, Backbone)
{
    'use strict';

    var Employee= Backbone.Model.extend({

        defaults: {
            name: '',
            skill: '',
            latitude : 0,
            longitude : 0
        },

    });

    return Employee;
});

JSON Response

[
{
    "name" : "bob",
    "skill" : "project manager",
    "latitude" : 12512.25,
    "longitude" : 95952.26
},


{
    "name" : "sarah",
    "skill" : "software dev",
    "latitude" : 89432.25,
    "longitude" : 1205.26
},


{
    "name" : "tom",
    "skill" : "evil sys admin",
    "latitude" : 1215,
    "longitude" : 92325
}

]

Collection

    define([
    'underscore',
    'backbone',
    'models/employee'
], function (_, Backbone, Store, Employee) {
    'use strict';

    var Employees = Backbone.Collection.extend({
        // Reference to this collection's model.
        model: Employee,

    });

    return new Employees();
});

Code

emps = new Employees();
emps.url("/testURL"); //
emps.sync();

emps.model[0]; //undefined !!!

So from that I can conclude that the Collection is not smart enough to instantiate an array of Employee models from the JSON response. How can I do this?

Answer 1

The function you're looking for is fetch . Fetch uses sync to fetch data, and then instantiates models accordingly.

If your API doesn't respond to a GET /someurl then what you need to override is the sync method. Read the source to see how it works.

Also, you're not using url properly. It should be a string, or a function that returns a string.

var employees = new Employees();
employees.url = '/my/testurl';
// note that fetch is async
employees.fetch().done(function () {
  console.log(employees.length);
});

Answer 2

Right now your collection constructor code is getting undefined as its input array, and thus remains empty.

You want to pass your collection into your Employees constructor, like

var emps = new Employees(arrayOfEmployees, {model: Employee});

Also, that last part (re-specifying the model) is likely not necessary.