I am receiving data from php in the form on an obj, and am sending it through a mustache template to make a table.
My question is how can i control the row breaks for my data, I wish to insert a <tr
> for every 3 <td>
is this possible without the help of Javascript?
{"Form":[
{"Label":"Name","Info":"megan fox"},
{"Label":"Phone","Info":"(111) 222-3333"},
{"Label":"Name","Info":"sfsdfsdf"},
{"Label":"Zip","Info":"dsfsdfs"},
{"Label":"State","Info":"sdfsf"},
{"Label":"City","Info":"4fsfsf"},
{"Label":"Address","Info":"dfsodufsf"},
{"Label":"Phone #","Info":"(111) 222-3333"},
{"Label":"Zip","Info":"34545345"},
{"Label":"State","Info":"sdfsf"},
{"Label":"City","Info":"sdfosdffd"},
{"Label":"Address","Info":"sdfsfssf"}
]}
<table>
{{#Form}}
<tr>
<td><span class="label">{{Label}}</span>
<span class="Information">{{Info}}</span>
</td>
</tr>
{{/Form}}
</table>
<table>
<tbody>
<tr>
<td><span class="label">Name</span>
<span class="Information">megan fox</span> </td>
</tr>
<tr>
<td><span class="label">Phone</span>
<span class="Information">(434) 434-543</span> </td>
</tr>
<tr>
<td><span class="label">Name</span>
<span class="Information">sfsdfsdf</span> </td>
</tr>
..
</tbody>
</table>
<table>
<tbody><tr>
<td><span class="label">Name</span>
<span class="Information">megan fox</span> </td>
<td><span class="label">Phone</span>
<span class="Information">(111) 222-3333</span> </td>
<td><span class="label">Name</span>
<span class="Information">sfsdfsdf</span> </td>
</tr>
...
</tbody></table>
Reading the manual here http://mustache.github.io/mustache.5.html is says that
When the value is a non-empty list, the text in the block will be displayed once for each item in the list. The context of the block will be set to the current item for each iteration. In this way we can loop over collections.
I think that if you can change the output from the server, this may offer the simplest solution. Can you get the output to look like this?
{
"Form": {
"Items": [
{"Label": "Name", "Info": "megan fox"},
{"Label": "Phone", "Info": "(111) 222-3333"},
{"Label": "Name", "Info": "sfsdfsdf"},
{"Label": "Zip", "Info": "dsfsdfs"},
{"Label": "State", "Info": "sdfsf"},
{"Label": "City", "Info": "4fsfsf"},
{"Label": "Address", "Info": "dfsodufsf"},
{"Label": "Phone #", "Info": "(111) 222-3333"},
{"Label": "Zip", "Info": "34545345"},
{"Label": "State", "Info": "sdfsf"},
{"Label": "City", "Info": "sdfosdffd"},
{"Label": "Address", "Info": "sdfsfssf"}
]
}
}
If so, you can then get your template to iterate over the Items, you will then need to change your template to this;
<table>
{{#Form}}
<tr>
{{#Items}}
<td><span class="label">{{Label}}</span>
<span class="Information">{{Info}}</span>
</td>
{{/Items}}
</tr>
{{/Form}}
</table>