Top level collection of a Backbone.js model won't sort

Question

I'm working on my first Backbone.js app and have run into some weird behavior that I'm concerned could indicate a problem in my design. My data looks like this:

Syllabus
    Dance
        Figure
        Figure
        Figure
    Dance
        Figure
        Figure
    etc.

I have created this model to represent it:

$.syllabus.Syllabus = Backbone.RelationalModel.extend({
    urlRoot: '/api/syllabus',
    idAttribute: 'id',
    relations: [{
        type: Backbone.HasMany,
        key: 'danceAssignments',
        relatedModel: '$.syllabus.DanceAssignment',
        collectionType: '$.syllabus.DanceAssignmentCollection',
        reverseRelation: {
            key: 'syllabus',
            includeInJSON: 'id'
        }
    }]
});

$.syllabus.DanceAssignment = Backbone.RelationalModel.extend({
    urlRoot: '/api/danceassignments',
    idAttribute: 'id',
    relations: [{
        type: Backbone.HasMany,
        key: 'figureAssignments',
        relatedModel: '$.syllabus.FigureAssignment',
        collectionType: '$.syllabus.FigureAssignmentCollection',
        reverseRelation: {
            key: 'danceAssignment',
            includeInJSON: 'id'
        }
    }],
});

$.syllabus.DanceAssignmentCollection = Backbone.Collection.extend({
    model: $.syllabus.DanceAssignment,
    urlRoot: '/api/danceassignments',

    comparator: function(danceAssignment) {
        return danceAssignment.get('index');
    },
});

$.syllabus.FigureAssignment = Backbone.RelationalModel.extend({
    urlRoot: '/api/figureassignments',
    idAttribute: 'id'
});

$.syllabus.FigureAssignmentCollection = Backbone.Collection.extend({
    model: $.syllabus.FigureAssignment,
    url: '/api/figureassignments',

    comparator: function(figureAssignment) {
        return figureAssignment.get('index');
    },
});

The FigureAssignmentCollection is sorting automatically when I change the index property of one of its members, but the DanceAssignmentCollection isn't, nor does it sort when I explicitly tell it to. The comparator is called, but if I print out the contents of the collection after the sort they're in the wrong order, and the interface renders them out of order.

Any thoughts?

By "wrong order" I mean no sorting happens. The collection members stay in whatever order they arrived from the server. danceAssignment.get('index') is returning the correct value. — Kevin Kelly, Feb 27 '13 at 14:16

score 0 · Accepted Answer · answered Mar 04 '13 at 18:56

I found the solution. My views were rendering the danceAssignments collection as part of SyllabusView. Once I added a DanceListView with the collection as its data and had it rendering the DanceViews instead of SyllabusView doing it the dances started sorting properly, and some other very odd behaviors resolved as well.

Top level collection of a Backbone.js model won't sort

1 Answers1