テンプレートはソート後にモデルオブジェクトからレンダリングされません

Question

レンダリングするEmber.Routeのmodel()メソッドで返す前に、Ember-Dataから照会されたオブジェクトの配列を 'type'キーでソートしています。

アプリ/路線/ test.js

export default Ember.Route.extend({ 
    model() { 
    let obj = Ember.Object.create({a: [], b: [], c: []}); 
    this.get('store').findAll('obj').then(function(unsorted){ 
     unsorted.forEach(function(item) {// sort per type 
     obj.get(item.get('type')).addObject(item); 
     }); 
     return obj; 
    }); 
    } 
}); 

（の約束）がエンバー・データのクエリは次のようになります（すべてのオブジェクトは、エンバー内部プロパティを持っている）

[ 
    { 
    _id: '1', 
    type: 'a', 
    properties: {...} 
    }, 
    { 
    ... 
    }, 
    { 
    _id: '15', 
    type: 'b', 
    properties: {...} 
    } 
] 

によって返される配列

"type"キーでソートされたオブジェクトを持つ新しいオブジェクトは、次のようになります

{ 
    a: [{ 
     _id: '1', 
     type: 'a', 
     properties: {...} 
    }, 
    ... 
    ], 
    b: [ 
    ... , 
    { 
     _id: '15', 
     type: 'b', 
     properties: {...} 
    }, 
    c: [...] 
}; 

アプリ/路線/ test.hbs

<h2>Test</h2> 
<h3>Type a</h3> 
{{#each model.a as |source|}} 
    <div> 
    {{source.properties.prop1}} 
    </div> 
{{/each}} 

テンプレートは、配列をループ部分をレンダリングしていない、またエンバー・インスペクタプラグインリストはの「独自のプロパティ」の下Model財産ありませんルート（「ツリーの表示」モードの右パネル）。

しかし、POJO（文字どおりキーで配列のオブジェクトを貼り付ける）を返すと、すべてが期待どおりに動作します。
これはEmber-dataが返すオブジェクトの内部（Ember-）プロパティと関係がありますが（私はオブジェクトの所有者などについて読んだことがあります）、これを理解することはできません。 。

Answer 1

@Pavolの答えは基本的な問題になりますが、これは約束の仕方であるので、はreturn this.store...then(...)で動作します。 the documentationを読んでください。

だから、これは動作します：

model() { 
    let obj = Ember.Object.create({a: [], b: [], c: []}); 
    return this.get('store').findAll('obj').then(function(unsorted){ 
    unsorted.forEach(function(item) {// sort per type 
     obj.get(item.get('type')).addObject(item); 
    }); 
    return obj; 
    }); 
} 

.then(onFulfilled)をonFulfilled -callbackの戻り値を解決する新しい約束を返します。new Promise(...)で新しい約束事を作成することは、すでに約束をしており、コールバックスタイルのコードとの相互運用性のためだけには全く役に立たない。

Answer 2

あなたmodel()フックでreturn文が欠落しています

export default Ember.Route.extend({ 
    model() { 
    let obj = Ember.Object.create({a: [], b: [], c: []}); 
    this.get('store').findAll('obj').then(function(unsorted){ 
     unsorted.forEach(function(item) {// sort per type 
     obj.get(item.get('type')).addObject(item); 
     }); 
     return obj; 
    }); 
    // no return value before, findAll() returns promise, thus model() returns undefined 
    } 
}); 

をしかし、あなたの約束は（ then()機能）を解消した後、あなたが別のオブジェクトを更新しているので、 return this.store...があなたの状況を解決することはできません加えます。 私はそれを約束で包み、ソートロジックに基づいて修正されたオブジェクトを渡すことを解決することをお勧めします。 注：私は、この段階でソートが意味をなし、「Ember-way」であるかどうかは考慮しなかった。ソートは、通常、コントローラ/コンポーネントレベルの計算プロパティを使用して行われます。

export default Ember.Route.extend({ 
    model() { 

    return new Ember.RSVP.Promise((resolve)=>{ 
     let obj = Ember.Object.create({a: [], b: [], c: []}); 
     this.get('store').findAll('obj').then(function(unsorted){ 
     unsorted.forEach(function(item) {// sort per type 
      obj.get(item.get('type')).addObject(item); 
     }); 
     resolve(obj); 
     }); 
    }); 

    } 
}); 

アップデート：（私はスニペットで指摘しても間違っ後述）ので、あなたがそれをラップする必要はありません有効な約束を返しthis.store()もちろん、confusementのため申し訳ありません！私はthen()に渡されたコールバックの戻り値が自動的に約束の中で内部的に渡されることを認識していませんが、私は約束の連鎖を使用していますが、これも日常的に使用しています。私には恥ずべき！ Thx @Luxを使ってこれを正しい方法で実行します。