Question

我正在尝试与Ember.js和Handlebar.js一起构建一个表。不幸的是，我遇到了如何使用valueBinding构建包含Ember.TextArea的单元格的方法。

这个想法如下。存在具有许多条目（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中），必须有一行。现在出现了棘手的部分：每个单元格必须绑定到'parameters'数组的相应元素（单元格的内容应该是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>

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

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

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

我的想法是将条目和密钥传递给帮助程序，然后返回一个Ember.TextArea实例，该实例绑定到entry.parameters数组的正确元素。

注意：通过迭代project.keys，我们可以保证键的顺序与标题中的顺序相同（迭代顺序相同）。

如何处理此问题还有其他想法吗？

Answer 1

这里最好的解决方案是编写自定义手柄助手。不幸的是，现在制作自定义绑定助手并不容易。这里有一个旧的PR，我们想要更新并开始使用1.0 https://github.com/emberjs/ember.js/pull/615。您可以从中获得一些想法来实现自己的实现。

Answer 2

疯狂的浴缸理念：您可以使用Ember.Object作为代理，动态定义线性化属性（在Coffeescript中为了理智，名称来自braindump）：

    TheProxy = Ember.Object.extend
      fill: (projects, entries) ->
         for project in projects
           entry = # find entry for project
           for key,value of entry
             this.set "value_for_#{project.id}_#{key}", value

之后，您可以通过生成{{value_for_xxx_yyyy}}绑定并以相似的方式生成模板，并将已填充的TheProxy实例绑定到它。

如何使用自定义助手（手柄）实现嵌套的每个循环

2 个答案: