Ember.js - Listet Werte aus dem Geschäft

Question

Von einer Route oder einer Komponente möchte ich ein Array von Werten aus Geschäftsdaten erstellen. Z.B. Ich habe ein Projektmodell und ich möchte eine Liste von Projektnamen bekommen, die ich in ausgewählten Boxen, Tabellenüberschriften verwenden kann ...

Ich habe das folgende versucht und berechnete Eigenschaften betrachtet, aber kann das nicht funktionieren ?

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

Ich denke, dass die Grundlagen von dem, was Sie brauchen, mit dem beforeModel() Haken beantwortet werden können. Der Hook gibt ein Versprechen zurück, das erfüllt wird, bevor der model() Hook aufgerufen wird. Damit können Sie zuerst die Liste der Projekte laden. Der folgende Code (ungetestet) sollten Sie es bekommen:

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

und Ihre Route, mit einigen Änderungen:

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

Wenn Sie die Projekte in der Vorlage verwenden möchten, können Sie diese einfach nutzen wie so:

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

und wenn Sie die projectNames Array zur Verfügung, erinnern wollen setupController zu verwenden, wie Sie in Ihrer Frage haben.

In der Tat, nach meiner Erfahrung möchten Sie wahrscheinlich selten das projectNames Array verwenden, aber stattdessen sind besser dran Iterieren durch die Reihe von Projekten. Dies gilt insbesondere für Vorlagen.

Answer 2

es nicht funktioniert, weil Sie ein Versprechen Objekt aus dem model Methode der Route zurückkommen müssen.

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