如何使用自定义助手（handlebar）实现嵌套每个循环 [英] How to implement nested each loops with custom helpers (handlebar)
问题描述
想法如下。有域模型项目有很多条目（1对n关系）。两个域模型都是不同的对象，不是嵌入的（项目没有嵌入到项目中）
每个项目都有一个名为keys的数组，包含几个字符串（例如' a'，'b'，'c'，...）。此外，每个条目都包含一个元素数组。该元素中的每一个也具有上述键之一作为属性键。参见下面的详细模型。
模型
em>
{keys：['a'，'b'，'c']}
条目
< pre class =lang-js prettyprint-override>
{
参数：[
{
键：'a'，
值：'aaaa'
}，
{
key：'b'，
value：null
}，
{
key：'c'，
值：'123'
}
]
}
<目标是到底有一个HTML表，其中包含项目每个键的列（在上述情况下，将有3列，标题为'a'，'b'，'c'）。对于现在与项目关联的每个条目（换句话说，在后台加载到ArrayController中），必须有一行。现在这里是棘手的部分：每个单元格必须绑定到parameters数组的适当元素（单元格的内容应该是一个Ember.TextArea）。
||一个|| b || c ||
---------------------------------------------- -------------------------------
|条目1绑定到参数array的元素，其中key ='a'| ... | ... |
---------------------------------------------- ------------------------------
|条目2绑定到参数数组的元素，其中key ='a'| ... | ... |
---------------------------------------------- -------------------------------
方法我
构建表头显然很简单，当然没有任何问题：
< table>
< thead>
< tr>
{{#each key in project.keys}}
< th> {{key}}< / th>
{{/ each}}
< / tr>
< / thead>
< tbody>
...
< tbody>
< / table>
我不知道如何构建代码的部分是正文。迭代数组控制器中的条目可能是的，但是如何绑定到适当的元素 - 我没有线索。棘手的是，绑定是建立在正确的元素上。例如在键'a'的列中，绑定必须是参数数组的元素，其中element.key ==='a'。
< tbody>
{{App.entriesController中的#each条目}}
< tr>
{{#each key in project.keys}}
???
{{/ each}}
< / tr>
{{/ each}}
< / tbody>
我以为使用一个手柄帮手，但是想出了Ember.js做的（这不同于handlebar.js的文档）不传递对象本身，它只传递属性的名称，然后可以使用该名称来获取该值。不幸的是，对于数组，我没有看到如何获取当前在每个循环中处理的数组的条目。
想法是通过条目和密钥这个帮助器然后返回Ember.TextArea的实例，该实例绑定到entry.parameters数组的正确元素。
注意：通过遍历project.keys我们可以保证键的顺序与标题中的相同（相同的迭代顺序）。
任何其他想法如何解决这个问题？ / p>
疯狂浴缸的想法：您可以使用Ember.Object作为代理，动态定义线性化属性（在Coffeescript中为了理智，名称只是从braindump）：
TheProxy = Ember.Object.extend
fill：（projects，entries） - >
项目中的项目
entry =＃为项目
输入项目的条目
this.setvalue_for _＃{project.id} _＃{key} ，值
之后，您可以以类似的方式生成模板，生成{{value_for_xxx_yyyy }}绑定并绑定一个填充的TheProxy实例给它。
I am trying to build a table together with Ember.js and Handlebar.js. Unfortunately I got stuck at the way how to build the cells which consist of Ember.TextArea with valueBinding.
The idea is the following. There is domain model project which has many entries (1 to n relation). Both domain models are different object and are not embedded (the entries are not embedded in the project).
Every project has an array called keys which contains several strings (e.g. 'a', 'b', 'c', ...). Furthermore every entry contains an array of elements. Each of this element has also one of the above mentioned keys as a property key. See the detailed model below.
Models
Project
{ keys: ['a', 'b', 'c'] }
Entries
{
parameters: [
{
key: 'a',
value: 'aaaa'
},
{
key: 'b',
value: null
},
{
key: 'c',
value: '123'
}
]
}
The target is to have in the end a HTML table which contains a column for each key of the project (in the above mentioned case there would be 3 columns with headers 'a', 'b', 'c'). For every entry that is now associated to the project (in other words loaded in the background into an ArrayController), there must be a row. And here comes now the tricky part: Each cell must be bound to the appropriate element of the 'parameters' array (the content of the cell should be an 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' | ... | ... |
-----------------------------------------------------------------------------
Approach I
Building the table headers is obviously pretty easy and works of course without any issue:
<table>
<thead>
<tr>
{{#each key in project.keys}}
<th>{{key}}</th>
{{/each}}
</tr>
</thead>
<tbody>
...
<tbody>
</table>
The part where I don't know how to build the code is the body. Iterating over the entries in the array controller possible yes, but how to bind then to the appropriate element - I have no clue. The tricky thing is, that the binding is established to the right element. For example in the column for the key 'a', the binding must be to the element of the parameters array where element.key === 'a'.
<tbody>
{{#each entry in App.entriesController}}
<tr>
{{#each key in project.keys}}
???
{{/each}}
</tr>
{{/each}}
</tbody>
I thought of using a handlebar helper but figured out that Ember.js does (which is different than the documentation of handlebar.js) not pass the object itself, it only passes the name of the property which one can then use to get the value. Unfortunately for an array I do not see how to get the entry of the array that gets currently processed in the each loop.
The idea was to pass the entry and the key to the helper and this one then returns an instance of the Ember.TextArea which is bound to the correct element of the entry.parameters array.
Note: By iterating over the project.keys we can guarantee that the order of the keys is the same as in the header (same iteration order).
Any other ideas how to approach this issue?
crazy bathtub idea: You could use an Ember.Object as a Proxy, dynamically defining linearized properties on it (in Coffeescript for sanity, names just from 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
After that, you could generate the template in a similar fashion, by generating the {{value_for_xxx_yyyy}} bindings and bind a filled instance of TheProxy to it.
这篇关于如何使用自定义助手（handlebar）实现嵌套每个循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
