The value of the model of the collectible model Backbone.js is not used

Question

The trunk does not use the model specified for the collection. Something is missing for me.

App.Models.Folder = Backbone.Model.extend({ initialize: function() { _.extend(this, Backbone.Events); this.url = "/folders"; this.items = new App.Collections.FolderItems(); this.items.url = '/folders/' + this.id + '/items'; }, get_item: function(id) { return this.items.get(id); } }); App.Collections.FolderItems = Backbone.Collection.extend({ model: App.Models.FolderItem }); App.Models.FolderItem = Backbone.Model.extend({ initialize: function() { console.log("FOLDER ITEM INIT"); } }); var folder = new App.Models.Folder({id:id}) folder.fetch(); // later on change event in a view folder.items.fetch(); 

The folder is loaded, items are then loaded, but they are not FolderItem objects, and FOLDER ITEM INIT is never called. They are the main objects of the model.

What did I miss? Should I do it differently?

EDIT: I don't know why this works against documentation, but the following works. Highway 5.3

 App.Collections.FolderItems = Backbone.Collection.extend({ model: function(attributes) { return new App.Models.FolderItem(attributes); } }); 

Answer 1

the problem is the ad order for your model and collection. basically, you need to define the model first.

 App.Models.FolderItem = Backbone.Model.extend({...}); App.Collections.FolderItems = Backbone.Collection.extend({ model: App.Models.FolderItem }); 

the reason is that basic objects are defined by the object literal syntax, which means that they are immediately evaluated after definition.

this code is functional, but illustrates the nature of the object literal:

 var folderItemDef = { ... }; var folderItemsDef = { model: App.Models.FolderItem } App.Models.FolderItem = Backbone.Model.extend(folderItemDef); App.Collections.FolderItems = Backbone.Collection.extend(folderItemsDef); 

you can see in this example that folderItemDef and folderItems Def are like object literals, in which their key: value pairs are evaluated immediately after the literal is defined.

in the source code, you first defined the collection. this means that App.Models.FolderItem is undefined when the collection is defined. so you essentially do this:

 App.Collection.extend({ model: undefined }); 

By moving the model definition above the collection definition, the collection can find the model and it will be correctly connected.

FWIW: the reason your functional version of installing the collection model is working is because the function is not evaluated until the application is executed and the model is loaded into the collection. at this point, the javascript interpreter has already found the model definition and is loading it correctly.