Ember.js: So zeigen Sie Daten von Ember.Map an

Question

Ich möchte einige Kontaktinformationen (Name, E-Mail, ...) nach Abteilung gruppiert anzeigen, aber ich kann es nicht mit Lenker erreichen.

• Abteilung X

  • Kontakt x1 info
  • Kontakt x2 info
  • ...

• Abteilung Y

  • Kontakt y1 info
  • Kontakt y2 info
  • ...

Ich weiß nicht, wie viele Abteilungen ich im Voraus haben. Also, in meinem Controller habe ich versucht, Informationen in einem Ember.Map, wo Abteilungen sind seine Schlüssel und und Array mit Kontakten Informationen ist der Wert für jede Abteilung zu laden. Es ist so etwas wie diese:

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

ein Fehler ausgelöst wird, sagte, dass „ein EmberCollectionView Inhalt muss Ember.Array implementieren Sie [object Object] bestanden“. Ist es möglich, eine Aufgabe mit verschachtelten Daten zu erreichen? Jede Hilfe ist willkommen. Vielen Dank.

Answer 1

Was ist eine Abteilung Klasse wie folgt zu erstellen:

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

und eine Kontaktklasse wie folgt aus:

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

Wenn Ihre Daten geladen werden, können Sie einfach eine Reihe von Abteilungen bauen

App.departments = []; 

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

Also, in Ihrer Vorlage könnten Sie etwas tun wie:

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