javascript - 如何仅使 Ember 路线模型的一部分成为 promise ？

Question

我有一个简单的template.hbs像这样:

// template.hbs

<p>{{model.x}}</p>
<p>{{model.y}}</p>

以下route.js按预期工作:

// route.js

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

export default Route.extend({

    model() {

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

    }
});

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

以下内容也适用，现在对整个模型使用 promise :

// 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

以下内容，我只想制作 model.x promise - 行不通。

// 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

它立即渲染输出，但在进入 setTimeout 中的回调之后它不会改变 model.x 的渲染值.

我知道RSVP.hash() ，但如果任何一个 promise 被拒绝，那么就会被拒绝。是否有可能对路线模型的不同部分有独立的 promise ，或者只有全有或全无？

奇怪的是，如果有问题的 promise 是由 ember-data 返回的，例如x: this.get('store').findRecord('user') ，它按其应有的方式工作(例如将 template.hbs 更改为 <p>{{model.x.name}}</p>)。

Answer 1

您可以使用PromiseObject或PromiseArray来自 ember-data:

export default Ember.Route.extend({
  model() {
        return {
            x: DS.PromiseObject.create({
              promise: new RSVP.Promise((resolve) => {
                  setTimeout(() => {
                      resolve({name: 'foo'});
                  }, 5000);
              })
            }),
            y: 'bar'
        };
    }
});

要实现此功能，您的 Promise 结果必须是一个对象(即 {name: 'foo'} 而不仅仅是 foo)。然后，您可以在模板中使用 x.name，这将返回 undefined，直到 Promise 返回。