Mustache partials and code reuse

Question 1

Mustache partials and code reuse

php templates mustache

tutuca · Nov 15, 2010 · Viewed 10.2k times · Source

Answer

Answer

Here is an example of how the php implementation of Mustache works. Of note is that Mustache.php will not expand the included partials/templates, so you have to hand them to mustache as seen below. This example was pieced together on an older cakephp framework.

<?
  # php cannot recognize multiple acceptable file extensions for partials,
  # so toggle it to mustache's extension
  $this->ext = '.mustache';

  # Mustache says it's logic-less, but that's not exactly true.
  # Render out the basic header which calls the logo partial and has
  # a {{# logged_in? }} condition which dictates which user box we
  # show. Thus, we need to render out the html for both the logged in
  # and logged out user boxes
  $basic_header_html = $this->renderElement('basic_header');
  $logo       = $this->renderElement('shared/logo');
  $logged_in  = $this->renderElement('shared/logged_in_user_box');
  $logged_out = $this->renderElement('shared/logged_out_user_box');

  $m = new Mustache($basic_header_html,                    
                    array('logged_in?' => !empty($this->Auth->userData),
                          'cache_buster' => time(),
                          'display_name' => 'StackOverflow Customer'),
                    array('shared/logo' => $logo,
                          'shared/logged_in_user_box' => $logged_in,
                          'shared/logged_out_user_box' => $logged_out));
?>

<!DOCTYPE html>
<html>
<head>
  <title>Mustache Test</title>
</head>

<body>
  <?= $m->render(); ?>
</body>
</html>

basic_header.mustache

<div id="header" class="basic">
  {{> shared/logo }}

  {{# logged_in? }}
    {{> shared/logged_in_user_box }}
  {{/ logged_in? }}

  {{^ logged_in? }}
    {{> shared/logged_out_user_box }}
  {{/ logged_in? }}
</div>

shared/logo.mustache

<a class="logo" href="/foo/bar"><img alt="" src="/images/logo.png?{{ cache_buster }}" /></a>

shared/logged_in_user_box.mustache

Hello {{display_name}}, you are logged in.

shared/logged_out_user_box.mustache

Hello. You are not logged in.

Question 2

I'm getting the hang of mustache for a project I've started during the weekend.

I'm using the PHP implementation. I have, however a couple of inquiries as I'm not used to the system.

How do you handle template inheritance, or reuse? I know of partials, but how should I use them? I'm doing something like this, ala include:

top.mustache:

<!DOCTYPE html>
<html lang='es'>
<head>
    <meta charset=utf-8" />
    <link rel="stylesheet" href="/media/style.css" type="text/css" media="screen" />
</head>
<body>
     <header><h1><a href="/">Top</a></h1>
     </header>
     <section>

bottom.mustache:

        </section>
        <footer><a href="http://potajecreativo.com/">potaje</a></footer>
</body>
</html>

And a view to render this template:

{{>top}}
<form action="/album/" method="post">
    <p><label for="name">Name</label> <input type="text" name="name" value=""/></p>
    <p><label for="description">Description</label> <textarea name="description" rows="8" cols="40"></textarea></p>
    <p><input type="submit" value="Save" /></p>
</form>
{{>bottom }}

Is this the right approach?

Mustache partials and code reuse

Answer

Related questions