mustache

Mustache template rendering module for Magento

Installation

ampersand/mustache uses composer to handle installation of the module and its dependencies. If you're not already using composer to install Magento modules, follow the instructions here.

Use this command to add the module to your project

composer require ampersand/mustache:^1.0.1

Usage

Documentation on Mustache templates can be found here

Server Side Rendering

Include the mustache block in Layout

<block type="ampersand_mustache/template"
    name="mustache.block.name"
    template="path/to/template.mustache" />

You can assign data to a block through the parent template or in Layout using a Helper.

From the parent template

$data = array();
...
$this->getChild('mustache.block.name')->setTemplateData($data)->toHtml();

From the Layout using a helper

<block type="ampersand_mustache/template"
    name="mustache.block.name"
    template="path/to/template.mustache">

    <action method="setTemplateData">
        <data helper="somehelper/getMustacheTemplateData" />
    </action>

</block>

Features

Use the same block to render the same template multiple times, if you don't want the data to cascade (ie. for the array to be merged repeatedly) pass true as the third param

<?php foreach ($products as $product): ?>
    <?php
    echo $this->getChild('mustache.block.name')
        ->setTemplateData($product, null, true)
        ->toHtml()
    ?>
<?php endforeach ?>

Pass an array as data or a string value pair

$data = array();

$this->getChild('mustache.block.name')
    ->setTemplateData($data)
    ->toHtml();

$this->getChild('mustache.block.name')
    ->setTemplateData('key', 'value')
    ->toHtml();

Client Side Rendering

Include the mustache.js library in Layout (or in a merged and minified JS file)
```
<action method="addJS"><name>mustache/mustache.js</name></action>
```

Add the mustache block to the Layout and assign the template a unique ID. This will include a script tag that includes the template on the page with that unique ID

<block type="ampersand_mustache/script"
    name="mustache.block.name"
    template="path/to/template.mustache">

    <action method="getTemplateId">
        <id>js-unique-mustache-template-id</id>
    </action>

</block>

Consume the template in your javascript

var template = $('#js-unique-mustache-template-id').html();
var html = Mustache.render(template, data);

Documentation on the mustache javascript library can be found here

Contribute

Help us make this module better, submit a pull request :)

Fork the repo
Require dev-default using composer
In vendor/ampersand/mustache add your fork as another git remote repo
Update module, test and commit changes
Submit a pull request