Ember.js-列出商店中的值

Question

From a route or component, I want to create an array of values from store data. Eg I have a project model and I want to get a list of project names i can use in select boxes, table headings...

I've tried the following and looked at computed properties, but can't get this working?

// user route

model() {

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

    ...

---

Update:

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

It isn't working because you need to return a promise object from the model method of the route.

// 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'));
}

Answer 2

I think the basics of what you need can be answered with the beforeModel() hook. The beforeModel() hook returns a promise, which will be fulfilled before the model() hook will be called. That lets you load the list of projects first. The following code (untested) should get you there:

// 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({});
    }
  }
});

and your route, with some changes:

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

If you want to use the projects in your template, you can just use them like so:

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

and if you want the projectNames array available, remember to use setupController as you did in your question.

In fact, in my experience you probably rarely want to use the projectNames array, but instead are better off iterating through the set of projects. This is particularly true in templates.