Generating Pages
Both dynamic and static "pages" can be generated using the cloud.template
module. The output type can be HTML for web output, or other formats like JSON, or plain text. You can choose the output type based on your needs.
A "page" consists of the following components:
- A template file with embedded tokens
- A structured Lua table holding token values
- A decided upon return type (HTML, JSON, TEXT)
Let's start by looking at an example template, and the Lua content table.
Token Replacement
Token Examples
{{ variable }}
{{ object.variable }}
{{ array_tbl[3] }}
{{ object.someFunc() }}
Template
<!-- tpl/index.tpl --> <html> <head> <title>{{ page.title }}</title> </head> <body> <div class="container"> {{ page.content }} </div> </body> </html>
Lua
-- api.lua local api = cloud.api() function api.get.home() local page = { title = "Welcome", content = "Hello Lua!" } local str = cloud.template.render('index.tpl', page) return str, cloud.HTML end return api
Output
<!-- index.html --> <html> <head> <title>Welcome</title> </head> <body> <div class="container"> Hello Lua! </div> </body> </html>
Looping Data
Another nice thing about templates is being able to "loop" over data and generate the output. This has many use cases beyond just displaying a table of data to the user. Setting up a loop is very simple:
Signature
{% for idx, item in ipairs(items) do %} -- that's just Lua! <div>{{ item }} is item number {{ idx }}</div> {% end %}
Template
<!-- tpl/users.tpl --> <html> <head> <title>{{ page.title }}</title> </head> <body> <div class="container"> <ul class="user-list"> {% for _, user in ipairs(page.users) do %} <li class="user">{{ user.first }} {{ user.last }}</li> {% end %} </ul> </div> </body> </html>
Lua
local api = cloud.api() function api.get.users() local page = { title = "Users", users = { { first="Jim", last="Bell" }, { first="Dani", last="Bell" } } } local str = cloud.template.render('users.tpl', page) return str, cloud.HTML end return api
Output
<!-- users.html --> <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>
Template Tags
Type | Code | Notes |
---|---|---|
HTML escaped | {{ expression }} |
Output a HTML escaped value. |
Plain value | {* expression *} |
Output a non-escaped (raw) value. |
Lua code | {% code here %} |
Run Lua expressions. |
Include file | {(other.tpl)} or {(other.tpl, ctx)} |
Include another template file, optionally passing new context. |
Raw blocks | {-raw-}unhandled text{-raw-} |
Mark sections for skipping interpolation. |
Working with AJAX
Because of the way Coronium 2 apps are built, you can easily point your requests to public, and even key based endpoints.
For example, you can make an asynchrous call to refresh some data:
Lua
-- apps/cats/api.lua local api = cloud.api() function api.get.list(input, isAjax) if not isAjax then return cloud.error('must be Ajax request') end local cats = { 'Snookie','Fluffy','Yip' } return cats end return api
HTML / Javascript
Using JQuery
... <body> <div id='cats'>cats go here</div> <script> $.getJSON('https://instance.com/cats/list', function(data) { $('cats').innerHTML = data.request; }); </script> </body> ...