Ember.js - 店舗の値をリストする

Question

ルートまたはコンポーネントから、ストアデータから値の配列を作成したいとします。例えば。私はプロジェクトモデルを持っています。私は選択ボックス、テーブル見出しで使用できるプロジェクト名のリストを取得したいと思います...

私は以下を試してみましたが、計算されたプロパティを見ましたが、 ？

// user route 

model() { 

    let projects = this.store.findAll('project').then((projects) => { 
     return projects.mapBy('name'); 
    }); 

    ... 

---

更新：

// users.new route 
import Ember from 'ember'; 

export 
default Ember.Route.extend({ 

    projectNames: [], 

    afterModel: function() { 
     this._super(...arguments); 
     return this.store.findAll('project').then((projects) => { 
      this.set('projectNames', projects.mapBy('name')); 
     }); 
    }, 

    setupController: function (controller) { 
     this._super(...arguments); 
     controller.set('projectNames', this.get('projectNames')); 
    }, 

    model() { 
     let user = this.store.createRecord('user'), 
      projectRoles = [], 
      projects = this.get('projectNames'); 

      console.log('projectNames: ' + this.get('projectNames')); 

     projects.forEach((project) => { 
      let projectRole = this.store.createRecord('projectRole', { 
       project: project, 
       role: 'Viewer' 
      }); 
      projectRoles.push(projectRole); 
     }); 

     // Create 1 role per project 
     Ember.RSVP.all(projectRoles.map(projectRole => projectRole.save())).then((projectRoles) => { 
      user.set('projectRoles', projectRoles); 
     }); 

     return user; 
    } 
} 

Answer 1

あなたが必要とするものの基礎はbeforeModel()フックで答えることができると思います。 beforeModel()フックは約束を返します。これはmodel()フックが呼び出される前に実行されます。これにより、まずプロジェクトのリストを読み込むことができます。 （未テスト）次のコードでは、そこにあなたを取得する必要があります。

// services/project-core.js 
import Ember from 'ember'; 

export default Ember.Service.extend({ 
    store: Ember.inject.service(), 
    projects: null, 

    init() { 
    this.set('projects', []); 
    }, 

    // getProjects() needs to be called at least once before the projects are available in the application. Ideally this method will be called in the route's beforeModel() hook. 
    getProjects() { 
    if (this.get('projects').length === 0 { 
     // this makes sure we only query for the projects once; you may not want this block. I personally like to avoid unneeded queries. 
     return this.get('store').findAll('project').then(projects => { 
     this.set('projects', projects); 
     }); 
    } else { 
     return Ember.RSVP.hash({}); 
    } 
    } 
}); 

とあなたのルート、いくつかの変更を：あなたのテンプレートでプロジェクトを使用したい場合は

// users.new route 
import Ember from 'ember'; 

export default Ember.Route.extend({ 
    projectCore: Ember.inject.service(), 

    beforeModel() { 
    return this.get('projectCore').getProjects(); 
    }, 

    model() { 

    // Here you'll be able to do things like: 
    this.set('projectNames', this.store.peekAll('project').map(function(x) {return x.get('name')})); 

    // and from your code: 
    let user = this.store.createRecord('user'), 
     projectRoles = [], 
     projects = this.get('projectNames'); 

    console.log('projectNames: ' + this.get('projectNames')); 

    projects.forEach((project) => { 
     let projectRole = this.store.createRecord('projectRole', { 
      project: project, 
      role: 'Viewer' 
     }); 
     projectRoles.push(projectRole); 
    }); 

    // and so on... 
    } 
} 

、あなただけのようにそれらを使用することができますそう：

<ul> 
    {{#each projectCore.projects as |project|}} 
    <li>{{project.name}}</li> 
    {{/each}} 
</ul> 

、あなたが利用可能projectNames配列をしたい場合、あなたはあなたの質問で行ったようにsetupControllerを使用することを忘れないでください。

実際、私の経験ではおそらくprojectNamesアレイを使用することはほとんどありませんが、代わりに一連のプロジェクトを反復する方が良いでしょう。これはテンプレートで特に当てはまります。

Answer 2

あなたがルートのmodel方法から約束のオブジェクトを返す必要があるためそれが機能していません。

// return a promise object from the model. 
// This is available as the `model` property in the route's controller 
model() { 
    return this.store.findAll('project') 
}, 

// Store the list of names in a property ('projectNames') on the route's 
// controller. 
setupController(controller, models) { 
    controller.set('projectNames', models.mapBy('name')); 
}