Basic templating with Elixir-mustache
Posted on September 28, 2014 by in Elixir, eWebmachine, Mustache
This week I’ll be looking at basic, inline templating using Mustache (Elixir-Mustache) within the context of Ewebmachine by way of an aside to the work that we have been doing on the link shortener as presented in my previous posts.
Next week, I’ll be looking at applying these concepts to the link shortener application to provide an simple UI around the service. Getting on with the task set this week then. To begin, set up a new Ewebmachine project as detailed here. If you’re playing along at home, I’ve called mine SimpleTemplates. In addition to the standard set up you will need to change the deps function in the mixs.exs file as below: At time of writing the mururu version wasn’t working as expected because it hadn’t been updated to work with the change in Elixir Pre-1, so if you get errors on compiling, then switch from mururu/elixir-mustache to cliveharber/elixir-mustache. I’m adovating using the original first, mainly because its not my work, but hopefully because they’ll accept my changes and integrate them into the project. Ok, hopefully that’s all in place and compiling - you did remember to didn’t you? In your supervisor, add the following to your init/1 function: I’m running this on port 18080 so that I don’t clash with anything else that might be running on my localhost, but the port that you want to use is entirely up to you. With that in place, we now need to create the resource file. Start by creating lib/basic_template_resource.ex In that file enter: Compile and run as normal with Then in your web browser of choice, navigate to http://localhost:18080/basic, and you should see a page not too dissimilar to:
If you’re seeing that then everything is looking ok. The next thing to consider really is how to display lists of things. To display a list, you need a list of things, in the form of a keyword list of keyword lists. For example, start a new resource file called lib/list_template_resource.ex. In that file add the following contents: After you’ve added this module to the supervisor, and started it by running Job Donedefp deps do
[
{:ewebmachine, "1.0.0", [github: "awetzel/ewebmachine"]},
{:mustache, "0.0.1", [github: "mururu/elixir-mustache"]}
]
end$ mix deps.get && mix compile supervise([
supervisor(Ewebmachine.Sup,[[modules: [BasicTemplateResource],port: 18080]])
], strategy: :one_for_one)$ vim lib/basic_template_resource.exdefmodule BasicTempateResource do
use Ewebmachine
resource ['basic'] do
to_html do
template = "<html><head>
<title>Basic Templating with Elixir/Ewebmachine and Mustache</title>
</head><body>
<h1>{{ header }}</h1>
<p>If you're seeing this then you've successfully built an inline template with <a href='{{ url }}'>{{ name }}</a>
</body></html>"
ctx = [header: 'Welcome to the basic inline template', url: 'http://www.distortedthinking.agency', name: 'DistortedThinking']
Mustache.render(template, ctx)
end
end
end$ iex -S mix
defmodule ListTemplateResource do
use Ewebmachine
resource ['listing'] do
to_html do
template = "<html><head>
<title>{{ title }}</title>
</head><body>
<h1>{{ title }}</h1>
<div>
<p>{{ static_content }}</p>
<ul>
{{#urls}}
<li>Listed: {{ url }}</li>
{{/urls}}
</ul>
</div>
</body></html>"
ctx = [
title: 'Mustache lists with Elixir',
static_content: 'The following items are from the supplied list:',
urls: [
[url: 'http://www.distortedthinking.agency'],
[url: 'http://pragprog.com'],
[url: 'http://www.whitemonkeysoftware.co.uk'],
]
]
Mustache.render(template, ctx)
end
end
end$ iex -S mix, you can navigate to http://localhost:18080/listing and see a simple looking list of three items.
