mercredi 6 décembre 2017

How to make only part of Ember route model a promise?

I have a simple template.hbs like this:

// template.hbs

<p></p>
<p></p>

The following route.js works as expected:

// route.js

import Route from '@ember/routing/route';

export default Route.extend({

    model() {

        return {
            x: 'foo',
            y: 'bar'
        };

    }
});

// output, immediately:
// foo
// bar

The following also works, now using a promise for the whole model:

// route.js

import Route from '@ember/routing/route';
import RSVP from 'rsvp';

export default Route.extend({

    model() {

        return new RSVP.Promise((resolve) => {
            setTimeout(() => {
                resolve({
                    x: 'foo',
                    y: 'bar'
                });
            }, 1000);
        });

    }
});

// output, after 1s:
// foo
// bar

The following, where I want to make only model.x a promise - does NOT work.

// route.js

import Route from '@ember/routing/route';
import RSVP from 'rsvp';

export default Route.extend({

    model() {

        return {
            x: new RSVP.Promise((resolve) => {
                setTimeout(() => {
                    resolve('foo');
                }, 1000);
            }),
            y: 'bar'
        };

    }
});

// output, IMMEDIATELY:
// [object Object]
// bar

It renders output immediately, but after it enters the callback in setTimeout it doesn't change the rendered value for model.x.

I am aware of RSVP.hash(), but that will reject if any of the promises rejects. Is it possible to have independent promises for different parts of route model or only all-or-nothing?

Oddly enough, if the promise in question is returned by ember-data, e.g. x: this.get('store').findRecord('user'), it works as it should work (changing template.hbs with <p></p> for instance).




Aucun commentaire:

Enregistrer un commentaire