Ember.js : Comment afficher des données à partir d'Ember.Map

Question

J'aimerais afficher certaines informations de contact (nom, courriel,...) regroupées par département mais je ne parviens pas à le faire avec Handlebars.

• Département X

  • Contact x1 info
  • Contact x2 info
  • ...

• Département Y

  • Contacter y1 info
  • Contacter y2 info
  • ...

Je ne sais pas combien de départements j'ai à l'avance. Donc, dans mon contrôleur, j'ai essayé de charger les informations dans une Ember.Map où les départements sont ses clés et un tableau avec les informations des contacts est la valeur pour chaque département. C'est quelque chose comme ça :

map = Ember.Map.create();
// Load data from server into map
// m = {'Department X': [{name:'x1','email':'emailx1',...},{...}], 'Department Y':[....], ...}

{{#each department in map}}
    {{department}}
    {{#each contact in map.keys}}
        {{contact.name}} | {{contact.email}}
    {{#each}}
{{#each}}

Une erreur est signalée, indiquant que "le contenu d'un EmberCollectionView doit mettre en œuvre Ember.Array. Vous avez passé [object Object]". Est-il possible de réaliser une telle tâche avec des données imbriquées ? Toute aide sera la bienvenue. Merci.

Answer 1

Que diriez-vous de créer une classe de département comme ceci :

App.Department = Ember.Object.extend({
  name: null
  contacts: null // will be an array of App.Contact
})

et une classe de contact comme celle-ci :

App.Contact = Ember.Object.extend({
  name: null,
  email: null,
})

Lors du chargement de vos données, vous pourriez simplement construire un tableau de départements

App.departments = [];

// parse the arriving json and populate the departments array
App.departments.pushObject(
   App.Department.create(
        {name: dptLoadedName, contacts: [App.Contact.create({...})]}
   )
)

Ainsi, dans votre modèle, vous pourriez faire quelque chose comme :

{{#each department in App.departments}}
   {{department.name}}
   {{#each contact in department.contacts}}
     {{contact.name}} | {{contact.email}}
   {{#each}}
{{#each}}