环境

# Ember       : 1.4.0
# Ember Data  : 1.0.0-beta.7+canary.b45e23ba

型号

我已经简化了我的用例，使问题更容易理解和回答。假设我们有 3 个模型:Country , Region和 Area :

Country:
  - id: DS.attr('number')
  - name: DS.attr('string')
  - regions: DS.hasMany('region')

Region:
  - id: DS.attr('number')
  - name: DS.attr('string')
  - country: DS.belongsTo('country')
  - areas: DS.hasMany('area')

Area:
  - id: DS.attr('number')
  - name: DS.attr('string')
  - region: DS.belongsTo('region')

预期结果

Route 的模型钩子(Hook)应该返回一个对象数组。像这样:

Note: The indentations are only to make the example more readable.

 Country I
   Region A
      Area 1
      Area 2
   Region B
      Area 3
 Country II
   Region C
      Area 4
 Country III
   Region D
      Area 5

当前方法

App.MyRoute = Ember.Route.extend({
  model: function() {
    return this.store.find('country').then(function(countries){
      // promise all counties

      // map resolved countires into an array of promises for owned regions
      var regions = countries.map(function(country){
        return country.get('regions');
      });

      // map resolved regions into an array of promises for owned areas
      var areas = regions.then(function(regions){
        return regions.map(function(region){
          return region.get('areas');
        });
      });

      // do not return until ALL promises are resolved
      return Ember.RSVP.all(countries, regions, areas).then(function(data){
        // here somehow transform the data into expected output format and return it
      });
    });
  }
)};

错误

我得到 Error while loading route: TypeError: Object [object Array] has no method 'then'这显然来自这段代码:

var regions = countries.map(function(country){
  return country.get('regions');
});
var areas = regions.then(function(regions){
// regions is not a promise

但是这应该显示我遇到的真正问题:

问题

我需要 countries决心获得 regions ，这反过来我需要得到 areas .我一直在检查 RSVP.hash和 RSVP.all功能，阅读官方 API 并观看 this talk ，但是我有点未能创建正确的代码来链接 promise ，并且在最后的 then 中修改返回的结果以符合我的期望。

最后的想法

有人告诉我，像这样加载数据可能会导致许多 HTTP 请求，这可能会通过侧载更好地解决，但是:

• 此刻，我使用 FixturesAdapter , 所以 HTTP 请求不是问题
• 我真的很想更好地理解 RSVP 和 Promises

这就是为什么弄清楚如何正确完成这项工作对我来说很重要。

编辑 1:应用 kingpin2k 建议的更改

我创建了一个 JSBin对于我的示例，kingpin2k 的 anwser 建议进行更改。

虽然代码有效，但结果是……意外:

• 在countries数组我找到了 country和 region对象。 为什么？
• country和 region对象似乎已加载，但区域没有(请参阅 JSBin 中的控制台日志结果)。为什么？

编辑 2:对 Edit1 意外行为的解释。

所以我终于注意到我在 Ember 的正道上误入歧途了。 Kingpin2k 的答案向前迈出了一大步，但它包含一个小错误:

return this.store.find('country').then(function(countries){
  // this does not return an array of regions, but an array of region SETs
  var regionPromises = countries.getEach('regions');

  // wait for regions to resolve to get the areas
  return Ember.RSVP.all(regionPromises).then(function(regions){
    // thats why here the variable shouldn't be called "regions"
    // but "regionSets" to clearly indicate what it holds

    // for this example i'll just reassign it to new var name
    var regionSets = regions;

    // now compare these two lines (old code commented out)
    //var areaPromises = regions.getEach('areas'); 
    var areaPromises = regionSets.getEach('areas');

    // since regionSet does not have a property "areas" it
    // won't return a promise or ever resolve (it will be undefined)

    // the correct approach would be reduceing the array of sets
    // an array of regions
    var regionsArray = regionSets.reduce(function(sum, val){
      // since val is a "Ember.Set" object, we must use it's "toArray()" method
      // to get an array of contents and then push it to the resulting array
      return sum.pushObjects(val.toArray());
    }, []);

    // NOW we can get "areas"
    var realAreaPromises = regionsArray.getEach('areas');

    // and now we can use Ember.RSVP to wait for them to resolve
    return Ember.RSVP.all(realAreaPromises).then(function(areaSets){
    // note: here again, we don't get an array of areas
    // we get an array of area sets - each set for the corresponding region
      var results = [];

所以..现在我终于正确解析了所有对象(国家、地区、地区)并且可以继续我的工作:)

编辑 3:此 JSBin 中的工作解决方案!

最佳答案

诀窍是您需要解决某些 promise ，然后才能访问这些记录的属性。 Ember.RSVP.all 采用 promise 数组。 Ember.RSVP.hash 采用 promise 哈希。不幸的是，在之前的 promise 得到解决之前，您无法构建您的 promise (a la，直到 countries 已解决，并且在 regions 已解决之前，您不知道要获取哪些 areas)。在这种情况下，您确实有一系列要获取的 promise (尽管每个级别都有一系列 promise )。 Ember 知道要等到最深层的 promise 得到解决，然后将该值用作模型。

现在我们需要假装 regions 和 area 是异步的，如果它们不是异步的，您就是在告诉 Ember Data 信息将包含在请求中country，或者在带有 region 的请求中，这些集合不会是 promise，因此我在下面包含的代码将不起作用。

regions: DS.hasMany('region', {async: true})

areas: DS.hasMany('area', {async: true})

App.IndexRoute = Ember.Route.extend({
  controllerName: 'application',

  model: function() {
    return this.store.find('country').then(function(countries){
      // get each country promises
      var regionCollectionPromises = countries.getEach('regions');

      // wait for regions to resolve to get the areas
      return Ember.RSVP.all(regionCollectionPromises).then(function(regionCollections){

        var regions = regionCollections.reduce(function(sum, val){
            return sum.pushObjects(val.toArray());
        }, []);

        var areaCollectionPromises = regions.getEach('areas');
        //wait on the areas to resolve
        return Ember.RSVP.all(areaCollectionPromises).then(function(areaCollections){

          // yay, we have countries, regions, and areas resolved

          return countries;
        });
      });
    });

  }
});

综上所述，既然您似乎正在使用 Ember Data，我将返回 this.store.find('country') 并让 Ember Data 在使用时获取数据...这个模板可以在没有所有这些 promise 代码的情况下工作，并且会随着 Ember Data 自己履行 promise 而填充(一旦它看到你试图使用数据，它就会请求数据，很好的延迟加载) .

{{#each country in model}}
  Country: {{country.name}}
  {{#each region in country.regions}}
    Region: {{region.name}}
      {{#each area in region.areas}}
        Area: {{area.name}}
     {{/each}}
  {{/each}}
{{/each}}

关于javascript - 如何使用 EmberData 在 EmberJS 中返回由嵌套模型组成的 promise ？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23206883/