mirror of
https://github.com/danieleteti/delphimvcframework.git
synced 2024-11-16 16:25:54 +01:00
146 lines
3.4 KiB
Plaintext
146 lines
3.4 KiB
Plaintext
<!DOCTYPE html>
|
|
<html>
|
|
<header>
|
|
<style>
|
|
body {
|
|
font-family: Consolas, 'Courier New';
|
|
}
|
|
|
|
blockquote {
|
|
font-style: italic;
|
|
color: #a0a0a0;
|
|
padding: 0.2em;
|
|
}
|
|
|
|
.section {
|
|
background-color: #3a3a3a;
|
|
color: white;
|
|
border-left: 0.5em red solid;
|
|
padding: 0.5em;
|
|
}
|
|
|
|
.box {
|
|
border: thin black solid;
|
|
margin: auto;
|
|
width: 80%;
|
|
padding: 2em;
|
|
}
|
|
</style>
|
|
</header>
|
|
|
|
<body>
|
|
<h1>Mustache Template Showcase</h1>
|
|
<p>
|
|
This page is a showcase for all the mustache features usable from DMVCFramework Server Side Views using the default Mustache engine.
|
|
</p>
|
|
|
|
<div>
|
|
<h2 class="section">List of objects</h2>
|
|
<div>
|
|
{{^people}}
|
|
<div>No People Found</div>
|
|
{{/people}}
|
|
{{#people}}
|
|
<div>{{-index}}. {{first_name}} {{last_name}}</div>
|
|
{{/people}}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 class="section">Handle empty list of objects</h2>
|
|
<div>
|
|
{{^people2}}
|
|
<div>No People Found</div>
|
|
{{/people2}}
|
|
{{#people2}}
|
|
<div>{{-index}}. {{first_name}} {{last_name}}</div>
|
|
{{/people2}}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 class="section">Avoid HTML automatic escaping using {{=<% %>=}} {{ content }} <%={{ }}=%></h2>
|
|
|
|
<div class="box">
|
|
{{#myobj}}
|
|
{{{rawhtml}}
|
|
{{/myobj}}
|
|
<br>
|
|
<blockquote >Check source code to know how to escape curly braces</blockquote >
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 class="section">Handling partials</h2>
|
|
<div>
|
|
<ul>
|
|
{{#people}}
|
|
<li>{{>partial_person}}</li>
|
|
{{/people}}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 class="section">Using Standard Helpers</h2>
|
|
<ul>
|
|
<li>Using syntax {{=<% %>=}} {{UpperCase "value as string" }} <%={{ }}=%> Helper UpperCase is invoked passing "value as string" as constant value.</li>
|
|
<li>Using syntax {{=<% %>=}} {{UpperCase first_name }} <%={{ }}=%> Helper UpperCase is invoked passing the value contained in the attribute first_name.</li>
|
|
<li>Helpers can be nested: {{=<% %>=}} {{UpperCase LowerCase last_name}} <%={{ }}=%> Helper LowerCase is invoked passing the value contained in the attribute last_name and then, the result, is passed to the helper UpperCase.</li>
|
|
</ul>
|
|
<div>
|
|
{{#people}}
|
|
<div>{{-index}}. {{UpperCase first_name}} {{UpperCase LowerCase last_name}}</div>
|
|
{{/people}}
|
|
</div>
|
|
<hr>
|
|
<h3>dmustache provides the following helpers</h3>
|
|
<p>DateTimeToText</p>
|
|
<p>DateToText</p>
|
|
<p>DateFmt</p>
|
|
<p>TimeLogToText</p>
|
|
<p>JSONQuote</p>
|
|
<p>JSONQuoteURI</p>
|
|
<p>ToJSON</p>
|
|
<p>MarkdownToHtml</p>
|
|
<p>SimpleToHtml</p>
|
|
<p>WikiToHtml</p>
|
|
<p>BlobToBase64</p>
|
|
<p>EnumTrim</p>
|
|
<p>EnumTrimRight</p>
|
|
<p>PowerOfTwo</p>
|
|
<p>Equals</p>
|
|
<p>If</p>
|
|
<p>NewGUID</p>
|
|
<p>ExtractFileName</p>
|
|
<p>Lower</p>
|
|
<p>Upper</p>
|
|
<hr>
|
|
<h3>DMVCFramework provides some extensions to the dmustache helpers</h3>
|
|
<p>
|
|
{{=<% %>=}} {{UpperCase "daniele teti"}} <%={{ }}=%> outputs: {{UpperCase "daniele teti"}}
|
|
</p>
|
|
<p>
|
|
{{=<% %>=}} {{LowerCase "DANIELE TETI"}} <%={{ }}=%> outputs: {{LowerCase "daniele teti"}}
|
|
</p>
|
|
<p>
|
|
{{=<% %>=}} {{Capitalize "daniele teti"}} <%={{ }}=%> outputs: {{Capitalize "daniele teti"}}
|
|
</p>
|
|
<p>
|
|
{{=<% %>=}} {{SnakeCase "daniele teti"}} <%={{ }}=%> outputs: {{SnakeCase "daniele teti"}}
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h2 class="section">Using Project Specific Helpers</h2>
|
|
<h3>Any project can define its own custom helpers</h3>
|
|
<p>
|
|
{{MyHelper1 "this is a text"}}
|
|
</p>
|
|
<p>
|
|
{{MyHelper2 "this is another text"}}
|
|
</p>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |