Use render function as pseudo html tag in mako

In mako, you can use the defined render function like a pseudo html tag. (Use Bootstrap dropdown sample) Specifically, the following code is rendered into html.

<!-- drop down widget -->
<%namespace file="./widget.html" name="w"/>

<%w:dropdown name="DropDown" id="dropdownMenu1">
  <%w:menu id="first" href="#">Action</%w:menu>
  <%w:menu href="#">Another Action</%w:menu>
  <%w:menu href="#">Something else here</%w:menu>
  <li role="presentation" class="divider"></li>
  <%w:menu href="#">Separated link</%w:menu>
</%w:dropdown>

This code will be html like below (remove blank lines).

<div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id=dropdownMenu1 data-toggle="dropdown">
    DropDown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a id=first role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a  role="menuitem" tabindex="-1" href="#">Another Action</a></li>
    <li role="presentation"><a  role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a  role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

Details below

In mako, there are two ways to call the render function.

When the following render function form is defined.

## helpers.html
<%def form="(action, method)">
<div class="form">
<form action="${action}" method="${method}">
</form>
</div>
</%def>

There are two ways to call it. The first is called in the $ {foo} format in the same way as variable expansion.

<%namespace file="./helpers.html" name="h"/>
## form
${h.form(action="#", method="POST")}

You may also write as follows. This is the second form.

<%namespace file="./helpers.html" name="h"/>
## form
<%h:form action="#" method="POST"></%h:form>

It can be called in a tag-like format.

Caller.body () allows the caller to embed a value internally

The good thing about being able to call it in a tag-like format is that you can embed some value inside the code block.

##It can be written as follows.
<%h:form action="#" method="POST">
  <div class="field has-feedback">
    <label>name:<input type="text" name="name"/></label>
  </div>
</%h:form>

Then, you can make the outer part to wrap first and decide the inner element at the time of calling. Use caller.body () to do this. If you change the code as below, the above example will work.

<%def form="(action, method)">
<div class="form">
<form action="${action}" method="${method}">
${caller.body()}
</form>
</div>
</%def>

Complete code for running the first example

gist

Use render function as pseudo html tag in mako

Use render function as pseudo html tag in mako

In mako, there are two ways to call the render function.

Caller.body () allows the caller to embed a value internally

Complete code for running the first example

reference