I am trying to create a table with Ember.js and Handlebar.js. Unfortunately, I'm stuck on how to create cells that consist of Ember.TextArea with a value of Binding.
The idea is as follows. There is a domain model project that has many records (from 1 to n). Both domain models are different objects and are not implemented (records are not embedded in the project).
Each project has an array called keys, which contains several lines (for example, "a", "b", "c", ...). In addition, each entry contains an array of elements. Each of these elements also has one of the above keys as a property key. See Detailed Model below.
Models
Project
{ keys: ['a', 'b', 'c'] }
Record
{ parameters: [ { key: 'a', value: 'aaaa' }, { key: 'b', value: null }, { key: 'c', value: '123' } ] }
The goal is to ultimately create an HTML table containing a column for each project key (in the above case, there should be 3 columns with the headers "a", "b", "c"). For each record that is now associated with the project (in other words, loaded in the background in the ArrayController), there should be a line. And now the tricky part comes: each cell must be bound to the corresponding element of the "parameters" array (the cell content must be 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 table headers is obviously pretty easy and, of course, no problem:
<table> <thead> <tr> {{#each key in project.keys}} <th>{{key}}</th> {{/each}} </tr> </thead> <tbody> ... <tbody> </table>
The part where I do not know how to create the code is the body. Iterating over the elements in the array controller is possible yes, but I have no idea how to bind it to the corresponding element. The difficulty is that the binding is set to the correct element. For example, in the column for the key "a", the binding should be associated with the element of the parameter array, where element.key === 'a'.
<tbody> {{#each entry in App.entriesController}} <tr> {{#each key in project.keys}} ??? {{/each}} </tr> {{/each}} </tbody>
I was thinking about using the descriptor helper, but found out that Ember.js (which is different from the handlebar.js documentation) does not pass the object itself, it only passes the name of the property, which can then be used to get the value. Unfortunately for the array, I don’t see how to get the record of the array that is currently being processed in each loop.
The idea was to pass the record and key to the helper, and then return an instance of Ember.TextArea, which is bound to the correct element in the entry.parameters array.
Note. Iterating over the project.keys files, we can guarantee that the order of the keys will be the same as in the header (the same iteration order).
Any other ideas on how to approach this problem?