-
-
Save bootleg224/56866e6588b4007f910b7a233fc4e7d0 to your computer and use it in GitHub Desktop.
Handlebars Helper Training - Tables.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{{!This is a Comment -- You can use Comments much like // or ' in other programming languages}} | |
{{!tablelength submissionForm.tableNameAlias gives number of non empty rows in the table}} | |
{{!submissionForm.tableNameAlias.[0].rowValue shows the rendered row value as per the table configuration}} | |
{{!submissionForm.tableNameAlias.[0].fieldValues.alias shows the data of the field for that row}} | |
Number of Rows in the Table with a Value: {{tableLength submissionForm.favoriteMenuItems}} | |
<hr/> | |
<br/> | |
{{!We have a table with the alias favoriteMenuItem, that table has 2 fields menuItem and price}} | |
Data from the First Table Row<br/> | |
Rendered Table Row: {{{submissionForm.favoriteMenuItems.[0].rowValue}}}<br/> | |
One Field from the Table Row: {{submissionForm.favoriteMenuItems.[0].fieldValues.menuItem}}<br/> | |
Next Field from the Table Row: {{submissionForm.favoriteMenuItems.[0].fieldValues.price}} | |
<hr/> | |
Data from the Second Row<br/> | |
Rendered Table Row: {{{submissionForm.favoriteMenuItems.[1].rowValue}}}<br/> | |
One Field from the Table Row: {{submissionForm.favoriteMenuItems.[1].fieldValues.menuItem}}<br/> | |
Next Field from the Table Row: {{submissionForm.favoriteMenuItems.[1].fieldValues.price}} | |
<hr/> | |
<br/> | |
<br/> | |
{{!When looping through a table, #if rowValue will determine if the row is empty, | |
from there you can directly call the field values, for our sample it is menuItem and price. | |
You can also directly call the rendered rowValue which is HTML based}} | |
<strong>Loop through Table without using array indexes</strong>:<br/> | |
{{#each submissionForm.favoriteMenuItems}} | |
{{#if rowValue}} | |
{{{rowValue}}} | |
Menu Item: {{menuItem}}, Price: {{price}} | |
<hr/> | |
{{/if}} | |
{{/each}} | |
<br/> | |
<br/> | |
<strong>Loop through Table in Reverse</strong>:<br/> | |
{{#tableReverse submissionForm.favoriteMenuItems}} | |
{{#each this}} | |
{{#if rowValue}} | |
{{{rowValue}}} | |
Menu Item: {{menuItem}}, Price: {{price}} | |
<hr/> | |
{{/if}} | |
{{/each}} | |
{{/tableReverse}} | |
<br/> | |
<br/> | |
<strong>Sort Table by Row Value</strong>:<br/> | |
{{#tableSort submissionForm.favoriteMenuItems "asc"}} | |
{{#each this}} | |
{{#if rowValue}} | |
{{{rowValue}}} | |
Menu Item: {{menuItem}}, Price: {{price}} | |
<hr/> | |
{{/if}} | |
{{/each}} | |
{{/tableSort}} | |
<br/> | |
<br/> | |
<strong>Sort Table by Row Value Descending</strong>:<br/> | |
{{#tableSort submissionForm.favoriteMenuItems "desc"}} | |
{{#each this}} | |
{{#if rowValue}} | |
{{{rowValue}}} | |
Menu Item: {{menuItem}}, Price: {{price}} | |
<hr/> | |
{{/if}} | |
{{/each}} | |
{{/tableSort}} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment