Skip to content

Templates

Jump to bottom
Jaime A. Rodriguez edited this page Sep 29, 2020 · 11 revisions

Table of Contents

The Basics

Each page in SleepyMUSTACHE consists of two main elements: Templates and Placeholders. The Template is an HTML page that can contain variables which we call placeholders. Placeholders are useful to make templates reusable. On a basic page template, we may want to have a placeholder for the heading and the body copy.

<!-- simple.tpl -->
<html>
  <body>
    <h1>{{ heading }}</h1>
    <main>
      {{ body }}
    </main>
  </body>
</html>

In this example file, simple.tpl, you can see the placeholders are surrounded by {{ and }}.

We can use the template to build a simple webpage by binding data to the placeholders.

require_once $_SERVER['DOCUMENT_ROOT'] . '/app/sleepy/bootstrap.php';

use \Sleepy\Core\Template;

$page = new Template('simple');
$page->bind('heading', 'My Webpage');
$page->bind('body', 'sleepyMUSTACHE is so easy to use!');

After some bootstrapping boilerplate code, we create a new Template object and pass in the templates name: simple. We then call the Template::bind() method to replace the placeholders with our chosen text.

Binding placeholders is an extremely powerful concept. Not only can you bind strings, but you can also bind arrays, the results of a database request, the payload of web services, and more. Creating a module is a versatile way to not only bind placeholders, but you can even perform actions on placeholders like sanitizing, validation, string replacement, etc.

Branching Logic

{{ #if condition }} 
  <h1>Sometimes display this</h1>
{{ /if }}

{{ #if }} statements can be used in your template to provide template branching logic. It is useful for things like displaying and login vs. a logout button, or adding and admin sidebar when the proper user is logged in. Ultimately, branching logic should be used sparingly to properly separate business logic from presentation. However, as developers we ofter times make concessions and so we included the #if statement, just ask yourself if the #if statement is better placed in a module or controller.

Looping

<table>
  {{ #each user in users }} 
    <tr><td>{{ user.first_name }}</td><td>{{ user.last_name }}</td></tr>
  {{ /each }}
</table>

The {{ #each }} statement allows for iterating an array of placeholders. Often times we need to display a variable amount of elements on the page, think lists. Some examples include a list of users, a list of blog entries, or a list of search results. The #each statement will iterate completely through an array and in each iteration bind the data to the template inside the #each statement. When combined with the #if statement we can accomplish branching logic such as "zebra" stripes on a table, or filtering users by role. Again, when using branching logic, explore using modules or controllers to separate business logic from presentation.

Including Other Templates

{{ #include header }}
  <main>
    {{ body }}
  </main>
{{ #include footer }}

The {{ #include }} statement is very powerful for creating reusable components. It is great for drying out your templates such as removing the header and footer and placing them in component templates. This will allow for rapid updates throughout the whole site by updating a single file. Including components is also great for separating work across your team without stepping on each other toes.

Best Practices

Make a habit of drying our your templates by breaking your templates into logical components and include them into your pages. Before adding branching logic into your template, ask yourself if makes more sense to use a module or controller.

Clone this wiki locally