7bc7e3bc63
* Font-Awesome V3.x to V4.x Font-Awesome V3.x to V4.x * Font Tidy Font Tidy * FA4 Upgrade - Html Js & Json FA4 Upgrade - Html Js & Json * Minor Minor
41 lines
No EOL
1.7 KiB
Markdown
Executable file
41 lines
No EOL
1.7 KiB
Markdown
Executable file
Often while building javascript interfaces, there is a need to render DOM as an HTML template. Frappe Framework uses John Resig's Microtemplate script to render HTML templates in the Desk application.
|
|
|
|
> Note 1: In Frappe we use the Jinja-like `{% raw %}{%{% endraw %}` tags to embed code rather than the standard `<%`
|
|
|
|
> Note 2: Never use single quotes `'` inside the HTML template.
|
|
|
|
To render a template,
|
|
|
|
1. Create a template `html` file in your app. e.g. `address_list.html`
|
|
1. Add it to `build.json` for your app (you can include it in `frappe.min.js` or your own javascript file).
|
|
1. To render it in your app, use `frappe.render(frappe.templates.address_list, {[context]})`
|
|
|
|
#### Example Template:
|
|
|
|
From `erpnext/public/js/templates/address_list.js`
|
|
|
|
{% raw %}<p><button class="btn btn-sm btn-default btn-address">
|
|
<i class="fa fa-plus"></i> New Address</button></p>
|
|
{% for(var i=0, l=addr_list.length; i<l; i++) { %}
|
|
<hr>
|
|
<a href="#Form/Address/{%= addr_list[i].name %}" class="btn btn-sm btn-default pull-right">
|
|
{%= __("Edit") %}</a>
|
|
<h4>{%= addr_list[i].address_type %}</h4>
|
|
<div style="padding-left: 15px;">
|
|
<div>
|
|
{% if(addr_list[i].is_primary_address) { %}<span class="label label-info">
|
|
{%= __("Primary") %}</span>{% } %}
|
|
{% if(addr_list[i].is_shipping_address) { %}<span class="label label-default">
|
|
{%= __("Shipping") %}</span>{% } %}
|
|
</div>
|
|
<p style="margin-top: 5px;">{%= addr_list[i].display %}</p>
|
|
</div>
|
|
{% } %}
|
|
{% if(!addr_list.length) { %}
|
|
<p class="text-muted">{%= __("No address added yet.") %}</p>
|
|
{% } %}{% endraw %}
|
|
|
|
|
|
|
|
|
|
<!-- markdown --> |