How to delay ember select loading all data at once


#1

Here are the routes in my router -

this.resource('sources', { path: '/sources' }, function() {
                this.resource('source', { path: '/:source_id' }, function() {
                    this.resource('notes', { path: '/notes' }, function() {
                        this.resource('note', { path: '/:note_id'}, function() {
                            this.resource('noteRevision', { path: 'revision/:note_revision_id'}, function() {

                            });
                        });
                    });
                });
            });

Relevant App.routes -

App.NoteRoute = Ember.Route.extend({
    afterModel: function(note, transition) {
        var revision = note.get('revisionId');
        if (transition && transition.params && transition.params.noteRevision) {
            revision = transition.params.noteRevision.note_revision_id;
        }
        this.transitionTo('noteRevision', revision);
    }
});

App.NoteRevisionRoute = Ember.Route.extend({
    model: function(params) {
        return this.store.find('noteRevision', params.note_revision_id);
    }
});

Here are the relevant ember data models I have -

App.Note = DS.Model.extend({
    revisionId: DS.attr('number'),
    locationId: DS.attr('number'),
    topic: DS.belongsTo('topic'),
    noteRevisions: DS.hasMany('noteRevision', {
        async: true
    })
});

App.NoteRevision = DS.Model.extend({
    dateCreated: DS.attr('date'),
    isPublished: DS.attr('boolean'),
    content: DS.attr('string'),
    note: DS.belongsTo('note')
});

NoteRevision handlebars file -

<div class="center-pane col-sm-6">
    {{model.content}}
</div>
<div class="right-pane col-sm-2">
    <div class="revisions">
        {{view "revisionSelect" class="form-control" content=note.noteRevisions optionLabelPath="content.id" selection=model}}
    </div>
    <div class="date-created">
        {{model.dateCreated}}
    </div>
</div>

My Revision Select View -

App.RevisionSelectView = Ember.Select.extend({
    selectionDidChange: function() {
        this._super();
        if (this.selection && this.selection.id) {
            this.get('controller').transitionToRoute('noteRevision', this.selection.id);
        } else  {
            this.get('controller').transitionToRoute('noteRevision', this.get('controller.model.revisionId'));
        }
    }.observes('selection')
});

Now the issue Im having, is that I don’t want all the note revisions to be loaded at once. They are very large and there can be hundreds of them. The select essentially acts as a forwarder that will automatically forward the user from /note/1 to either /note/1/revision/1 if the value selected is 1 or to /note/1/revision/2 (which is the current revision, which is on the model as revisionId).

I was hoping to access the ID’s of noteRevisions in App.Note then just loop over the ID’s so it wouldn’t actually load the revision of the note all at once. I have not found a way to do that but I am not even sure that is the right way to do it.

The way it is now, I go to /sources/1/notes/2/revision/4 and ember makes a call for /api/v1/noteRevisions/4and then it seems that it will load the rest via /api/v1/noteRevisions?ids%5B%5D=3&ids%5B%5D=6so it can fill out the select input.


Ember data and error handling on successful async call
#2

I got around this by severing the relationship between the models.

App.Note = DS.Model.extend({
    revisionId: DS.attr('number'),
    locationId: DS.attr('number'),
    topic: DS.belongsTo('topic'),
    noteRevisions: DS.attr()
});

App.NoteRevision = DS.Model.extend({
    dateCreated: DS.attr('date'),
    isPublished: DS.attr('boolean'),
    content: DS.attr('string')
}); 

Then in the select view, just set the content to be noteRevisions (which was the array of IDS)