Ember Route Promise - Is this doing what I need?

问题

I have a route that returns 3 models. Each model needs to be resolved before the route returns the models. I've attempted this using the following pattern (some code redacted to aid clarity)

export default Ember.Route.extend({
   model: function(params, transition) {

    var _this = this;

    //Set up a hash to pass to RSVP. Ensures that permissions are returned BEFORE outlet and account query
    var getPermissions = {

        permission : this.store.query('permission',query).then(function(permissions){

            var outlets = _this.store.findByIds('outlet', permissions.map REDACTED);

            var accounts = _this.store.findByIds('account', permissions.map REDACTED);

            var result = {permissions, accounts, outlets};

            return result;

        })


    };          

    return Ember.RSVP.hash(getPermissions); 
 }

});

This works in so far that all my models are correctly populated in the store, but I'm having issues with accessing attributes in the accounts and outlets models in my controller, but the UI renders these items without issue.

I'm guessing that this promise is not doing what I want, which is to ensure that ALL models are available before the models are returned.

Any help would be much appreciated!

回答1:

This works in so far that all my models are correctly populated in the store, but I'm having issues with accessing attributes in the accounts and outlets models in my controller, but the UI renders these items without issue.

You have issues with accounts and outlets, because Ember.RSVP.hash is resolved when this.store.query('permission', query) resolves.

Make sure you pass all promises to Ember.RSVP.hash after permissions is resolved:

export default Ember.Route.extend({
    model(params, transition) {   

        return new Promise((resolve) => {
            this.store.query('permission', query).then((permissions) => {
                let outlets  = this.store.findByIds('outlet', permissions.map REDACTED),
                    accounts = this.store.findByIds('account', permissions.map REDACTED);

                resolve(Ember.RSVP.hash({
                    outlets:     outlets,
                    accounts:    accounts,
                    permissions: permissions
                }));
            });
        });
    }
});

回答2:

As written, your model promise will resolve to a value like this { permissions: Array, accounts: Promise, outlets: Promise }

You want to eliminate the nested promises and end up with a value like this: { permissions: Array, accounts: Array, outlets: Array }

To do this, move the call to hash inside:

export default Ember.Route.extend({
   model: function(params, transition) {

    var _this = this;

    //Set up a hash to pass to RSVP. Ensures that permissions are returned BEFORE outlet and account query
    return this.store.query('permission',query).then(function(permissions){
        var outlets = _this.store.findByIds('outlet', permissions.map REDACTED);
        var accounts = _this.store.findByIds('account', permissions.map REDACTED);
        return Ember.RSVP.hash({permissions, accounts, outlets}); 
    });     

 }

});

Equivalently, ES6 syntax:

export default Ember.Route.extend({
  model: function(params, transition) {
    //Set up a hash to pass to RSVP. Ensures that permissions are returned BEFORE outlet and account query
    return this.store.query('permission',query).then(permissions => Ember.RSVP.hash({
        permissions,
        outlets: this.store.findByIds('outlet', permissions.map REDACTED),
        accounts: this.store.findByIds('account', permissions.map REDACTED)
    }));
  }
});

来源：https://stackoverflow.com/questions/32484273/ember-route-promise-is-this-doing-what-i-need

标签

ember.js

promise