CODEWITHSUNDEEP
ember.jsember-data
fischer
fischer

Reputation: 269

Emberjs - Lazy load hasMany relationship

I got two models set up like this:

App.Conversation = DS.Model.extend({
    header          : DS.attr('string'),
    created_at      : DS.attr('date'),
    entry           : DS.hasMany('Entry')
});


App.Entry = DS.Model.extend({
    body        : DS.attr('string'),
    conversation: DS.belongsTo('Conversation'),
    created_at  : DS.attr('date'),
});

And routes like this:

App.ConversationsRoute = Em.Route.extend({
    model: function() {
        return this.store.find('conversation');
    }
});


App.ConversationRoute = Em.Route.extend({
    model: function(params) {
        return this.store.find('conversation', params.id);
    }
})

And a Conversation controller like this:

App.ConversationController = Em.ObjectController.extend({
    actions: {
        loadMore: function() {

        }
    },
    entries: function() {
        return this.get('entry');
    }.property('model.entry')
});

Now, what I would like to do is only to supply 10 entries sideloaded with each Conversation. That works with no problems and I am able to retrieve all conversations with their hasMany relationship to Entry.

However I would like to lazyload more related entries at a later point by some functionality in my loadMore action, if the user clicks a button in my app.

How can this be achieved? I really can't wrap my head around how to load more entries and sync them to the Conversation model.

Thank you for your help.

Upvotes: 1

Views: 478

Answers (1)

Kingpin2k
Kingpin2k

Reputation: 47367

Manually fetch the 10 records via find by query, then push them into the entry collection using pushObjects. 

var entryCol = this.get('entry');
store.find('entry', {skip:10}).then(function (col){
   entryCol.pushObjects(col);
});

Something like this (sorry phone)

Upvotes: 1

Related Questions