---
layout: doc
title: Understanding Templates | Mobify.js Framework Documentation
---
# Understanding Templates
In Mobify.js, templates are text files that contain HTML markup, as
well as variables that are replaced with the selections from the konf
when the template is rendered. The konf decides which template should
be rendered based on the contents of the source DOM.
## Templates in Theory
A common pattern is to assign a template name to _content.templateName_
and later call `context.tmpl` on it:
'content': function(context) {
return context.choose(
{
'templateName': 'home',
'!products': function(context) {
return $('#products');
}
})
},
'OUTPUTHTML': function(context) {
var templateName = context.data(context.templateName);
if (templateName) {
return context.tmpl(templateName);
}
}
If `'home'` is assigned to _content.templateName_ the template
compiled from _src/tmpl/home.tmpl_ will be rendered. This is explained
in more detail in the [Konf Reference]({{ site.baseurl }}/docs/konf-reference/).
By default, Mobify.js compiles _.tmpl_ files from the _src/tmpl/_
directory and makes them available to `context.tmpl`.
Templates are text files that construct an HTML document. A simple
_home_ template might look like this:
Home
{#content.products}
{.}
{/content.products}
Assuming that the key _content.products_ selected a set of _
_
elements, calling `context.tmpl('home')` would evaluate the template
with the selected data, producing a string containing the following
markup:
Home
Product 1
Product 2
Product 3
## Templates in Practice
Websites generally have the same common templates: a header, footer,
base, and page specific templates. We include these different
templates in our scaffold when you initially create a product. For
example, a home template would typically look like this:
{>base/}
{Homepage
{#content.products}
{.}
{/content.products}
{/content}
_{>base/}_ is a **partial**, or template include, that uses base as its
parent template. _{
{>_header/}
{+content}{/content}
{>_footer/}