Skip to content

Templates

A template is simply an HTML file laced with template tags that will be filled in by values dynamically.

Template files are stored relative to the file that will be using them. The file referencing the template will be the .lua pages file.

Example Template

Stored in /home/coronium/pages/users/show.tpl

<html>
  <head>
    <title>{{ title }}</title>
  </head>
  <body>
    <p>{{ message }}</p>
  </body>
</html>

Example Lua

Stored in /home/coronium/pages/users/show.lua

local page = core.pages.new()

local data = 
{
  title = "Welcome!",
  message = "You are now using templates."
}

local body = page.template("show.tpl", data)

page.response(body)

Browser Location

Path: https://my.coronium.com/users/show

See also: page.render

Tip

To keep your template code from accidentally being viewed raw in the browser, be sure to name all template files with the .tpl extension.

Template Tags

Escaped Value

{{ expression }}

Plain Value

{* expression *}

Lua Code

{% code here %}

Include

{(other.tpl)}

Raw Block

{-raw-}non-interpolated text{-raw-}

Looping Data

Template loops allow you to "loop" over data and generate the output.

A Loop:

{% for idx, item in ipairs(items) do %}
  <div>{{ item }} is item number {{ idx }}</div>
{% end %}

Example Template

<!-- users.tpl -->
<html>
<head>
  <title>{{ title }}</title>
</head>
<body>
  <div class="container">
    <ul class="user-list">
      {% for _, user in ipairs( users ) do %}
      <li class="user">{{ user.first }} {{ user.last }}</li>
      {% end %}
    </ul>
  </div>
</body>
</html>

Example Page Lua

local page = core.pages.new()

local data =
{
  title = "Users",
  users =
  {
    { first="Jim", last="Bell" },
    { first="Dani", last="Bell" }
  }
}

page.render('/users.tpl', data)

Output

<html>
<head>
  <title>Users</title>
</head>
<body>
  <div class="container">
    <ul class="user-list">
      <li class="user">Jim Bell</li>
      <li class="user">Dani Bell</li>
    </ul>
  </div>
</body>
</html>

Asynchrous Request

To check for an asynchrous request, you can use the isAjax property of the pages object instance, and output the data in the required format.

Example Page Lua

--cat.lua
local page = core.pages.new()

local cat = {
  name = 'Snookie'
}

local function renderPage()
  if page.isAjax then
    --return as JSON
    page.renderJson( cat )
  else
    --or render template
    page.render( '/cat.tpl', cat )
  end
end

--incoming
if page.isGet then
  renderPage()
else
  page.status(501)
end

Example Template

Endpoint: http(s)://my.coronium.com/cat

<!-- cat.tpl -->
Cat: {{ name }}

Example HTML

Endpoint: http(s)://my.coronium.com/cat.html

Using JQuery

<!-- cat.html -->
<html>
    <head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
    </head>
    <body>
    <div id="cat">cat name goes here</div>
    <script>
      $.getJSON("/cat", function(data) {
        $('#cat').text("Cat: "+data.name);
      });
    </script>
  </body>
</html>

Output

Cat: Snookie