4

我正在尝试与 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 中），必须有一行。现在棘手的部分来了：每个单元格必须绑定到“参数”数组的适当元素（单元格的内容应该是 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 确实（与把手.js 的文档不同）不传递对象本身，它只传递属性的名称，然后可以使用该名称来获取值. 不幸的是，对于一个数组，我看不到如何获取当前在每个循环中处理的数组的条目。

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

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

任何其他想法如何解决这个问题？

4

2 回答 2

4

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

于 2012-09-17T03:45:19.750 回答
1

疯狂的浴缸想法：您可以使用 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 实例绑定到它。

于 2012-09-16T18:05:31.197 回答