Ember.js:如何从Ember.Map查看数据

erb*_*nka 5 nested-loops handlebars.js ember.js

我想查看按部门分组的一些联系信息(姓名,电子邮件,...),但我无法通过Handlebars实现.

  • X部门

    • 联系x1信息
    • 联系x2信息
    • ...
  • Y部门

    • 联系y1信息
    • 联系y2信息
    • ...

我不知道我提前有多少个部门.因此,在我的控制器中,我尝试在Ember.Map中加载信息,其中部门是其键,而带有联系人信息的数组是每个部门的值.它是这样的:

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}}
Run Code Online (Sandbox Code Playgroud)

抛出一个错误,说"EmberCollectionView的内容必须实现Ember.Array.你传递了[object Object]".是否可以通过嵌套数据实现suh任务?欢迎任何帮助.谢谢.

sly*_*7_7 5

如何创建这样的Department类:

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

和这样的Contact类:

App.Contact = Ember.Object.extend({
  name: null,
  email: null,
})
Run Code Online (Sandbox Code Playgroud)

加载数据时,您只需构建一系列部门即可

App.departments = [];

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

因此,在您的模板中,您可以执行以下操作:

{{#each department in App.departments}}
   {{department.name}}
   {{#each contact in department.contacts}}
     {{contact.name}} | {{contact.email}}
   {{#each}}
{{#each}}
Run Code Online (Sandbox Code Playgroud)