将多个值从 `model` 发送到 `template.hbs` - ember 方式

Question

我正在寻找正确的 ember 推荐方法，以便在发送到模板之前对数据值进行分组。

因为我有 2 个不同数组中的数据。

我不想在整个应用程序中保留 no.of 个迭代器。所以我想在新 creating/created 数组或 ember 推荐的正确方法中对数据进行分组。有人帮帮我吗？

我的模型：（样本）

import Ember from 'ember';

export default Ember.Route.extend({
  model(){
    return {
        "data" : {
        "group" : [{"group":"newGroup"}, {"group":"oldGroup"}],
        "details" : [{"name":"arif","age":"3"},                 {"name":"afi","age":"2"}]
      }
    }
  }
});

我的 hbs : /{{data.data.group}} - 如何显示这个？按相等的数组值？/

{{#each model.data.details as |data| }}
    <li>{{data.data.group}} {{data.name}} -- {{data.age}} </li>
{{/each}}
</ul>

Live Demo

Answer 1

我理解的对吗，你是想把对应的group显示到details数据集中？如果是这样，您想要显示组的方式不起作用，因为您现在尝试访问时没有 model.data.details.data.group。请记住，每个循环中的数据是 "reference" 到 model.data.details

我强烈建议您重组数据集，以便在组和详细信息之间建立联系。现在，我可以判断是否有一个......

将其视为一种新的数据结构：

{
  data: {
    groups: {
      newGroup: {
        name: "arif",
        age: 3
      },
      oldGroup: {
        name: "afi",
        age: 2
      }
    }
  }
}

然后你可以像这样迭代这个结构

{{#each-in data.groups as |groupName details|}}
  {{#each details as |data|}}
    {{groupName}} {{data.name}} - {{data.age}}
  {{/each}}
{{/each-in}}

在我看来，您还想在您的应用程序中多次使用此数据。如果这是真的，请考虑为此使用 service 并在您要访问它的每个组件中重用该服务。
在您的组件 js 文件中，您可以设置一个计算的属性来访问您服务中的数据。

Answer 2

您可以使用 details 数组的当前索引访问 group 数组：

{{#each model.data.details as |data index| }}
    <li>{{get this (concat "model.data.group." index ".group")}} {{data.name}} -- {{data.age}} </li>
{{/each}}

将多个值从 `model` 发送到 `template.hbs` - ember 方式

Sending Multiple values from `model` to `template.hbs` - the ember way

ember.js