javascriptember.jspromiseember-clirsvp-promise

Manage Ember Multiple RSVP Promises on the same route


I am working with the GitHub API in order to load models in a specific route

I am doing two promises one for my personal github details : https://api.github.com/users/user and the other one for my GitHub repositories https://api.github.com/users/user/repos

I can load the models separately but the problem is that i don't figure on how to load both models at the same time in my specific route.

See the code

var IndexRoute = Ember.Route.extend({
    model: function(params) {
        var url, self, git;
        self = this;
        git = this.store.createRecord('git',{});
        url = 'https://api.github.com/users/user';
        return new Ember.RSVP.Promise(function(resolve, reject) {
            return Ember.$.getJSON(url, function(data) {
                var item = [];
                git.setProperties({
                    name: data.name,
                    login: data.login,
                    location: data.location,
                    company: data.company,
                    followers: data.followers,
                    following: data.following
                });
                item.pushObject(git);
                return resolve(item);
            });
        });
    },
    model: function(params){
        var self, url, repoListProxy;
        self = this;
        url = 'https://api.github.com/users/user/repos';
        repoListProxy = Ember.ArrayProxy.create({
            content: []
        });
        return new Ember.RSVP.Promise(function(resolve, reject) {
            return Ember.$.getJSON(url, function(repos) {
                if (repos.length) {
                    repos.toArray().forEach(function(item, index, arr){
                        var repo;
                        repo = self.createReposList(item, repoListProxy);
                    });
                    repos = repoListProxy.get('content');
                    return resolve(repos);
                }
            });
        });
    },
    createReposList: function(repo, arr){
        var record
        record = this.store.createRecord('repo',{}),
        record.setProperties({
            name: repo.name,
            description: repo.description
        })
        arr.pushObject(record);
        return record;
    },
});

How can i load these multiple models with Ember.RSVP.Promise in my specific route?


Solution

  • Since the code you posted is too long to read i didn't implement solution based on it. Here's a common example of loading mutliple promises within a single route in the model hook.

       model: function() {
            var store = self.get('store');
            var someRecord = store.createRecord('foo/bar', {});
            var somePromise = imported_promise(someRecord);
    
            return Ember.RSVP.hash({
                accessRights: somePromise,
                itemData: somePromise.then(function(resolved) {
                     // Do something here, promise is resolved. 
                })
                myRecord: someRecord,
            });
        },
    

    Now if you need to access anything from route in the template or controller.

    you would first reference to model and then the property.

    {{model.myRecord}} or this.get('model.myRecord')

    Since you're a nice guy for downvoting me i decided i'd write it for you.

    I reccomend using Ic-AJAX : https://github.com/rwjblue/ember-cli-ic-ajax for async calls when you cant use store.find

    model: function() {
            var store = this.get('store');
    
    
            var userUrl = 'https://api.github.com/users/user';
            var reposUrl = 'https://api.github.com/users/user/repos';
    
            var usersPromise = function() {
                return ic.ajax.request(userUrl).then(function(data) {
                    return store.createRecord('git', {
                        name: data.name,
                        login: data.login,
                        location: data.location,
                        company: data.company,
                        followers: data.followers,
                        following: data.following
                    })
                };
            };
    
            var repositoriesPromise = function() {
                return ic.ajax.request(reposUrl).then(function(repos) {
                    return repos.map(function(repo) { // map returns new array no need to write container = [] . container.push(bla)
                        return store.createRecord('repos', {
                            name: repo.name,
                            description: repo.description
                        });
                    })
                };
            }
    
            return Ember.RSVP.hash({
                users: usersPromise,
                repositories: repositoriesPromise
            });
    
        },
    

    Since you're still using a different approach i went ahead and googled its syntax

       var gituserPromise = function() {
                return Ember.$.ajax(userUrl, {
    
        success: function(data) {
            return store.createRecord('git', {
                        name: data.name,
                        login: data.login,
                        location: data.location,
                        company: data.company,
                        followers: data.followers,
                        following: data.following
                    })
        },
        error: function(reason) {
           reject(reason);
        }});
    };
    
            return Ember.RSVP.hash({
                gitUser: gituserPromise()  
            });
    

    In hbs i can now do {{model.gitUser.name}}

    New link to it http://emberjs.jsbin.com/rutezi/2/edit?html,js,output