javascript - 如何使用自定义助手( Handlebars )实现嵌套的每个循环

Question

我正在尝试与 Ember.js 和 Handlebar.js 一起构建一个表。不幸的是，我在构建由 Ember.TextArea 和 valueBinding 组成的单元格时遇到了困难。

思路如下。有一个域模型项目有很多条目(1 到 n 关系)。两个领域模型都是不同的对象并且没有嵌入(条目没有嵌入到项目中)。

每个项目都有一个名为 keys 的数组，其中包含多个字符串(例如“a”、“b”、“c”……)。此外，每个条目都包含一个元素数组。此元素中的每一个还具有上述键之一作为属性键。请参阅下面的详细模型。

模型

项目

{ keys: ['a', 'b', 'c'] }

条目

{
  parameters: [
    {
      key: 'a',
      value: 'aaaa'
    },
    {
      key: 'b',
      value: null
    },   
    {
      key: 'c',
      value: '123'
    }
  ]
}

目标是最后有一个 HTML 表，其中包含项目的每个键的列(在上述情况下，将有 3 列，标题为“a”、“b”、“c”)。对于现在与项目相关联的每个条目(换句话说，在后台加载到 ArrayController 中)，必须有一行。现在是棘手的部分:每个单元格必须绑定(bind)到“参数”数组的适当元素(单元格的内容应该是 Ember.TextArea)。

|| a                                                             || b  || c ||
-----------------------------------------------------------------------------
| entry 1 binding to element of parameters array where key = 'a' | ... | ... |
----------------------------------------------------------------------------
| entry 2 binding to element of parameters array where key = 'a' | ... | ... |
-----------------------------------------------------------------------------

方法一

构建表格标题显然非常简单，当然可以毫无问题地工作:

<table>
   <thead>
     <tr>
       {{#each key in project.keys}}
         <th>{{key}}</th>
       {{/each}}
     </tr>
   </thead>

   <tbody>
     ...
   <tbody>
</table>

我不知道如何构建代码的部分是正文。迭代数组 Controller 中的条目可能是的，但是如何绑定(bind)到适当的元素 - 我不知道。棘手的是，绑定(bind)建立到正确的元素。例如，在键“a”的列中，绑定(bind)必须绑定(bind)到参数数组的元素，其中 element.key ===“a”。

<tbody>
  {{#each entry in App.entriesController}}
    <tr>
      {{#each key in project.keys}}
        ???
      {{/each}}
    </tr>
  {{/each}}
</tbody>

我想过使用 handlebar 助手，但发现 Ember.js 确实(与 handlebar.js 的文档不同)不传递对象本身，它只传递属性的名称，然后可以使用该名称得到值(value)。不幸的是，对于一个数组，我看不到如何获取当前在每个循环中处理的数组的条目。

我们的想法是将条目和 key 传递给助手，然后这个助手返回一个绑定(bind)到 entry.parameters 数组的正确元素的 Ember.TextArea 实例。

注意:通过遍历 project.keys，我们可以保证键的顺序与 header 中的顺序相同(相同的迭代顺序)。

关于如何解决这个问题还有其他想法吗？

Answer 1

这里最好的解决方案是编写自定义 Handlebars 助手。不幸的是，现在制作自定义绑定(bind)助手并不那么容易。这里有一个旧的 PR，我们想更新它并开始为 1.0 工作 https://github.com/emberjs/ember.js/pull/615 .您或许可以从中获得一些想法来进行自己的实现。