Question

我正在尝试使用一些标签和相应的翻译来呈现表格。翻译如下：

keys = [
  {
    id: 1,
    label: "one",
    translations: [
      en: {
        text: "one"
      },
      it: {
        text: "uno"
      },
      es: {
        text: "uno"
      },
      fr: {
        text: "un"
      }
    ]
  },
  {
    id: 2,
    label: "two",
    translations: [
      es: {
        text: "dos"
      },
      en: {
        text: "two"
      },
      it: null,
      fr: {
        text: "deux"
      }
    ]
  },
];

我必须渲染的翻译必须通过像这样的简单数组进行过滤：

langArray = ["en", "it", "es"];

这就是我渲染表的方式：

<table class="table table-hover" style="background-color:white" id="tblKeys">
  <thead>
    <tr>
      <th>Action</th>
      <th>Status</th>
      <th>Brand</th>
      <th>Type</th>
      <th>Key</th>
      {{#each langArray}}
      <th>{{this}}</th>
      {{/each}}
    </tr>
  </thead>
  <tbody>
    {{#each keys}}
    <tr>
      <td><a href="/keys/{{id}}/edit" class=""><i class="fa fa-edit"></i></a></td>
      <td>{{label}}</td>
      {{#each ../langArray}}
        {{#if translations[this]}}
          <td>{{translations[this].text}}</td>
        {{else}}
          <td></td>
        {{/if}}  
      {{/each}}
    </tr>
    {{/each}}

  </tbody>
</table>

我的问题是，由于langArray用于设置表头，因此我需要为数据行遵守相同的顺序，并且输入数据JSON无法保证这一点。所以我需要遍历keys然后迭代langArray并获取数据JSON中的元素与当前langArray元素中的索引相同。

但是，车把似乎不像translations[this]或translations.this那样提出另一个问题。

在这件事上，有些善意的灵魂可以给我建议吗？在此先感谢您的回复。祝你今天愉快！：）

Answer 1

我通过给出两个级别的不同引用然后使用双重查找来解决它：

  <tbody>
    {{#if rows}}
      {{#each rows as |row|}}
        <tr>
          <td><a href="/keys/{{row.id}}/edit" class=""><i class="fa fa-edit"></i></a></td>
          <td>{{row.status}}</td>
          <td>{{row.brand}}</td>
          <td>{{row.type}}</td>
          <td>{{row.label}}</td>
          {{#each ../langArray as |lang|}}
            <td>{{lookup (lookup row.translations lang) 'text'}} </td>
          {{/each}}
        </tr>
      {{/each}}
    {{else}}  
      <tr><td colspan="100" class="text-center">There are no keys to show.</td></tr>
    {{/if}}
  </tbody>

希望这有助于其他人！：）

Handlebars - 通过嵌套的每个外部密钥访问数组

1 个答案: