Skip to content
This repository has been archived by the owner on Oct 5, 2021. It is now read-only.

Commit

Permalink
Merge pull request #113 from Shan1024/string-helpers-changes
Browse files Browse the repository at this point in the history
Adding demos to features app for Handlebars helpers
  • Loading branch information
Kishanthan committed Jan 6, 2017
2 parents f422758 + 55c59b8 commit d125995
Show file tree
Hide file tree
Showing 47 changed files with 1,398 additions and 138 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,8 @@ menus:
submenus:
- text: "Block Helpers"
link: "/helpers/block-helpers"
- text: "String Helpers"
link: "/helpers/string-helpers"

errorPages:
404: /foundation/error/404
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,3 +10,4 @@ bindings:

config:
appName: "Features App"
highlightjsTheme: "tomorrow"
Original file line number Diff line number Diff line change
@@ -1,108 +1,122 @@
{{layout "org.wso2.carbon.uuf.sample.foundation.main"}}
{{title "each | Block Helper Sample | " @config.appName}}
{{fragment "org.wso2.carbon.uuf.sample.foundation.highlight" theme=@config.highlightjsTheme}}

{{#fillZone "content"}}
<h3>The 'each' Block Helper.</h3>
<h3><b>each</b> Helper</h3>
<hr />
<p>You can iterate over a list using the 'each' helper. </p>
<p>Inside the block, you can use this to reference the element being iterated over.</p>
<pre>
<figure class="highlight">
<pre class="code lang-handlebars">
&lt;ul class="people_list"&gt;
\{{#each people}}
\{{#each people}}
&lt;li&gt;\{{this}}&lt;/li&gt;
\{{/each}}
&lt/ul&lt
</pre>
\{{/each}}
&lt;/ul&gt;</pre>
</figure>
<p>For example: </p>
<pre>
<figure class="highlight">
<pre class="code lang-json">
{
people: [
"Yehuda Katz",
"Alan Johnson",
"Charles Jolley"
]
}
</pre>
}</pre>
</figure>
<p>will result in:</p>
<pre>
<figure class="highlight">
<pre class="code lang-handlebars">
&lt;ul class="people_list"&gt;
&lt;li&gt;Yehuda Katz&lt;/li&gt;
&lt;li&gt;Alan Johnson&lt;/li&gt;
&lt;li&gt;Charles Jolley&lt;/li&gt;
&lt;/ul&gt;
</pre>
&lt;li&gt;Yehuda Katz&lt;/li&gt;
&lt;li&gt;Alan Johnson&lt;/li&gt;
&lt;li&gt;Charles Jolley&lt;/li&gt;
&lt;/ul&gt;</pre>
</figure>
<h3>output:</h3>
<ul>
<li>Yehuda Katz</li>
<li>Alan Johnson</li>
<li>Charles Jolley</li>
</ul>
<p>You can use this expression in any context to reference the current context.</p>
<p>You can optionally provide an \{{else}} section which will display only when the list is empty.<p>
<pre>
\{{#each paragraphs}}
&lt;p&gt;\{{this}}&lt;/p&gt;
\{{else}}
&lt;p class="empty"&gt;No content&lt;/p&gt;
\{{/each}}
</pre>
<p>You can optionally provide an \{{else}} section which will display only when the list is empty.
<p>
<figure class="highlight">
<pre class="code lang-handlebars">
\{{#each paragraphs}}
&lt;p&gt;\{{this}}&lt;/p&gt;
\{{else}}
&lt;p class="empty"&gt;No content&lt;/p&gt;
\{{/each}}</pre>
</figure>
<p>When looping through items in each, you can optionally reference the current loop index via \{{@index}}</p>
<pre>
<figure class="highlight">
<pre class="code lang-handlebars">
\{{#each people}}
\{{@index}}: \{{this}}
\{{/each}}
</pre>
\{{@index}}: \{{this}}
\{{/each}}</pre>
</figure>
<p>Example:</p>
<pre>
<figure class="highlight">
<pre class="code lang-json">
{
people: [
"Yehuda Katz",
"Alan Johnson",
"Charles Jolley"
]
}
</pre>
}</pre>
</figure>
<h3>output:</h3>
<pre>
<figure class="highlight">
<pre class="code lang-handlebars">
0: Yehuda Katz
1: Alan Johnson
2: Charles Jolley
</pre>
2: Charles Jolley</pre>
</figure>
<p>Additionally for object iteration, \{{@key}} references the current key name:</p>
<pre>
<figure class="highlight">
<pre class="code lang-handlebars">
\{{#each people}}
\{{@key}}: \{{this}}
\{{/each}}
</pre>
\{{@key}}: \{{this}}
\{{/each}}</pre>
</figure>
<p>Example: </p>
<pre>
<figure class="highlight">
<pre class="code lang-json">
{
people: [
"first" => "Yehuda Katz",
"second" => "Alan Johnson",
"third" => "Charles Jolley"
]
}
</pre>
}</pre>
</figure>
<h3>output:</h3>
<pre>
<figure class="highlight">
<pre class="code lang-handlebars">
first: Yehuda Katz
second: Alan Johnson
third: Charles Jolley
</pre>
third: Charles Jolley</pre>
</figure>
<p>
The first and last steps of iteration are noted via the @first and @last variables when iterating over an array.
When iterating over an object only the @first is available.
Nested each blocks may access the interation variables via depth based paths.
To access the parent index, for example, \{{@../index}} can be used.
</p>
<p>The each helper also supports block parameters, allowing for named references anywhere in the block.</p>
<pre>
<figure class="highlight">
<pre class="code lang-handlebars">
\{{#each array as |value key|}}
\{{#each child as |childValue childKey|}}
\{{key}} - \{{childKey}}. \{{childValue}}
\{{/each}}
\{{/each}}
</pre>
\{{#each child as |childValue childKey|}}
\{{key}} - \{{childKey}}. \{{childValue}}
\{{/each}}
\{{/each}}</pre>
</figure>
<p>Will create a key and value variable that children may access without the need for depth variable references.</p>
<p>In the example above, \{{key}} is identical to \{{@../key}} but in many cases is more readable.</p>
<p></p>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,65 +1,74 @@
{{layout "org.wso2.carbon.uuf.sample.foundation.main"}}
{{title "if | Block Helper Sample | " @config.appName}}
{{fragment "org.wso2.carbon.uuf.sample.foundation.highlight" theme=@config.highlightjsTheme}}

{{#fillZone "content"}}
<h3>The 'if' Block Helper.</h3>
<h3><b>if</b> Helper</h3>
<hr />
<p>You can use the 'if' helper to conditionally render a block.</p>
<p>If its argument returns false, undefined, null, "", 0, or [], Handlebars will not render the block.</p>
<pre>
<figure class="highlight">
<pre class="code lang-handlebars">
&lt;div class="entry"&gt;
\{{#if author}}
&lt;h3&gt;\{{firstName}} \{{lastName}}&lt;/h3&gt;
\{{/if}}
&lt;/div&gt;
</pre>
&lt;/div&gt;</pre>
</figure>
<p>Example: </p>
<pre>
<figure class="highlight">
<pre class="code lang-json">
{
author: {
firstName: "John",
lastName: "Samuel"
}
}
</pre>
firstName: "John",
lastName: "Samuel"
}
}</pre>
</figure>
<p>will result in:</p>
<pre>
<figure class="highlight">
<pre class="code lang-handlebars">
&lt;div class="entry"&gt;
&lt;h3&gt;John Samuel&lt;/h3&gt;
&lt;/div&gt;
</pre>
&lt;/div&gt;</pre>
</figure>
<h3>output:</h3>
<h3>John Samuel</h3>
<p>When used with an empty ({}) context, author will be undefined, resulting in:</p>
<pre>
<figure class="highlight">
<pre class="code lang-handlebars">
&lt;div class="entry"&gt;
&lt;/div&gt;
</pre>
&lt;/div&gt;</pre>
</figure>
<p>When using a block expression, you can specify a template section to run if the expression returns a falsy value.
The section, marked by \{{else}} is called an "else section".
The section, marked by \{{else}} is called an "else section".
</p>
<pre>
<figure class="highlight">
<pre class="code lang-handlebars">
&lt;div class="entry"&gt;
\{{#if author}}
&lt;h3&gt;\{{firstName}} \{{lastName}}&lt;/h3&gt;
\{{else}}
&lt;h1&gt;Unknown Author&lt;/h1&gt;
\{{/if}}
&lt;/div&gt;
</pre>
\{{#if author}}
&lt;h3&gt;\{{firstName}} \{{lastName}}&lt;/h3&gt;
\{{else}}
&lt;h1&gt;Unknown Author&lt;/h1&gt;
\{{/if}}
&lt;/div&gt;</pre>
</figure>
<p>
Lets see an example which render the else section:
</p>
<pre>
<figure class="highlight">
<pre class="code lang-json">
{
author: false
}
</pre>
}</pre>
</figure>
<p>will result in:</p>
<pre>
<figure class="highlight">
<pre class="code lang-handlebars">
&lt;div class="entry"&gt;
&lt;h3&gt;Unknown Author&lt;/h3&gt;
&lt;/div&gt;
</pre>
&lt;/div&gt;</pre>
</figure>
<h3>output: </h3>
<h3>Unknown Author</h3>
{{/fillZone}}
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
{{layout "org.wso2.carbon.uuf.sample.foundation.main"}}
{{title "Block Helpers | " @config.appName}}

{{#fillZone "content"}}
<h3>Block Helpers : </h3>
<h3>Block Helpers</h3>
<hr />
<ul>
<li><a href="{{@contextPath}}/helpers/block-helpers/if">The 'if' Block Helper</a></li>
<li><a href="{{@contextPath}}/helpers/block-helpers/unless">The 'unless' Block Helper</a></li>
<li><a href="{{@contextPath}}/helpers/block-helpers/each">The 'each' Block Helper</a></li>
<li><a href="{{@contextPath}}/helpers/block-helpers/with">The 'with' Block Helper</a></li>
<li><a href="{{@contextPath}}/helpers/block-helpers/each">each</a></li>
<li><a href="{{@contextPath}}/helpers/block-helpers/if">if</a></li>
<li><a href="{{@contextPath}}/helpers/block-helpers/unless">unless</a></li>
<li><a href="{{@contextPath}}/helpers/block-helpers/with">with</a></li>
</ul>
{{/fillZone}}
Original file line number Diff line number Diff line change
@@ -1,23 +1,27 @@
{{layout "org.wso2.carbon.uuf.sample.foundation.main"}}
{{title "unless | Block Helper Sample | " @config.appName}}
{{fragment "org.wso2.carbon.uuf.sample.foundation.highlight" theme=@config.highlightjsTheme}}

{{#fillZone "content"}}
<h3>The 'unless' Block Helper.</h3>
<h3><b>unless</b> Helper</h3>
<hr />
<p>You can use the 'unless' helper as the inverse of the 'if' helper.</p>
<p>Its block will be rendered if the expression returns a falsy value.</p>
<pre>
<figure class="highlight">
<pre class="code lang-handlebars">
&lt;div class="entry"&gt;
\{{#unless license}}
&lt;h3&gt;WARNING: This entry does not have a license!&lt;/h3&gt;
\{{/unless}}
&lt;/div&gt;
</pre>
\{{#unless license}}
&lt;h3&gt;WARNING: This entry does not have a license!&lt;/h3&gt;
\{{/unless}}
&lt;/div&gt;</pre>
</figure>
<p>Example: </p>
<pre>
<figure class="highlight">
<pre class="code lang-json">
{
"license" = false;
}
</pre>
license: false
}</pre>
</figure>
<h3>output:</h3>
<h3>WARNING: This entry does not have a license!</h3>
<p>
Expand Down
Loading

0 comments on commit d125995

Please sign in to comment.