What is the difference in passing an array to the collection or fetch it from the server?

Question

I'm not understanding Backbone's sync behavior, I think. When passing in an array to the collection everything works, when trying to fetch the exact same data structure from either a json file or the server the collection doesn't get populated. Here is the what calls the collection.

define(['backbone',
'jquery',
'views/users',
'collections/user',
],
function(Backbone, $, UsersView, UserCollection){
var App = Backbone.View.extend({
    el:'.container',

    initialize: function() {
        var test = [

            {"name":"Someone","email":"some@gmail.com"},
            {"name":"Somebodyelse","email":"another@gmail.com"},
            {"name":"John","email":"idiot@aol.com"}
        ];
        var userCollection = new UserCollection(test);
        new UsersView({collection: userCollection});
    }
});
return App;

This works fine in my users view.

define(['backbone',
'jquery',
'underscore', 
'views/user',
],
function(Backbone, $, _, UserView){
var Users = Backbone.View.extend({
    el: $('.userlist'),

    initialize: function(){

        this.renderAll();
    },

    renderAll: function() {
        this.$el.empty();
        this.collection.each(this.render, this);
    },

    render: function(user){
        var userView = new UserView({model: user});
        this.$el.append(userView.render().el);
        return this;
    }
});
return Users;   

});

But when fetching the exact same json from the server like this:

define(['backbone',
'jquery',
'views/users',
'collections/user',
],
function(Backbone, $, UsersView, UserCollection){
var App = Backbone.View.extend({
    el:'.container',

    initialize: function() {

        var userCollection = new UserCollection;
        userCollection.fetch();
        new UsersView({collection: userCollection});
    }
});
return App; 

});

the collection gets populated with 1 model array that has four models in it. So the call to this.collection(this.render,this) only calls the render function once. Which results in this being logged to the console:

child {models: Array[0], length: 0, _byId: Object, constructor: function, url: "/users"…}
    _byId: Object
    _idAttr: "id"
    length: 4
    models: Array[4]
    __proto__: Surrogate

When I do some error checking in the fetch like this:

userCollection.fetch({
        success: function(response) {
        console.log(response);
    }

Then the collection is populated with 4 models and not 1 array with 4 models as seen it in what is being logged to the console:

child {models: Array[4], length: 4, _byId: Object, _idAttr: "id", constructor: function…}
_byId: Object
_idAttr: "id"
length: 4
models: Array[4]
__proto__: Surrogate

I'm not all that good at javascript to being with, and I am still trying to get my head wrapped around using modules. Is the problem with the way the collection is being passed around or with the server data?

Answer 1

Fixed it by binding the reset event to the renderAll function. I don't quite understand it, so that sucks, but it least it works.