Teepee is a templating system for JavaScript, ideal for creating websites, webapps, or anything else. Teepee is fast, stable, easy to use, and even lets you control the syntax (and all of this in 1KB).
Download teepee.js or get the latest release at GitHub.
To use Teepee, include this script anywhere in your page.
<script src="//rezitech.github.com/teepee/teepee.js"></script>Teepee syntax is easy to use and completely customizable.
<script>
teepee().write(
'Hello, {{=who}}!',
{ who: 'World' }
); // writes "Hello, World!"
</script>Use simplified IF and IF NOT statements to control output.
<script>
teepee().write(
'Hello{{?isEarth}}, Earth{{/isEarth}}{{?isMars}}, Mars{{/isMars}}!',
{ isMars: false, isEarth: true }
); // writes "Hello, Earth!"
teepee().write(
'Hello{{?person === "Dolly"}}, {{=person}}{{/person}}!',
{ person: 'Dolly' }
); // writes "Hello, Dolly!"
</script>Use a simplified loop statement to parse an array.
<script>
teepee().write(
'Ask these questions:{{#q}} {{=q}}{{/q}}.',
{ q: ['Who', 'What', 'Where', 'When', 'Why'] }
); // writes "Ask these questions: Who What Where When Why."
</script>Customize the syntax to your heart's content.
<script>
teepee()
.opener('@')
.closer('@')
.writer('$')
.write(
'The quick @$jumper@ jumps over the @$jumpee@.',
{ jumper: 'brown fox', jumpee: 'lazy dog' }
); // writes "The quick brown fox jumps over the lazy dog."
<script>Load templates from <script> elements.
<script id="demo-template" type="text/html">
<h1>
{{=pageTitle}}
</h1>
<p>
{{=pageDescription}}
</p>
</script>
<script>
tplObject = {
pageTitle: 'My Website',
pageDescription: 'Hello and welcome to my awesome website.'
};
teepee()
.tplById('demo-template') // sets the template string by the element where id="demo-template"
.use(tplObject) // sets the use object as tplObject
.write(); // writes the rendered template
</script>Load external templates from <script> elements using the src attribute. Create templates for HTML, CSS, or anything else.
<script src="example-external_script_tags.tpl.html" id="demo-html" type="text/html">
<!-- Contents of "example-external_script_tags.tpl.html" -->
<h1>
{{=pageTitle}}
</h1>
<nav>
<ul>
{{#pageNavigation}}
<li>
<a href="{{=pageNavigation.href}}">{{=pageNavigation.title}}</a>
</li>
{{/pageNavigation}}
</ul>
</nav>
</script>
<script src="example-external_script_tags.tpl.css" id="demo-css" type="text/css">
/* Contents of "example-external_script_tags.tpl.css" */
body {
background: {{=pageBackgroundColor}};
color: {{=pageTextColor}};
}
a {
color: {{=pageTextColor}};
text-decoration: none;
}
</script>
<script>
tplObject = {
pageTitle: 'My HTML5 Website',
pageNavigation: [
{ href: '#uno', title: 'One' },
{ href: '#dos', title: 'Two' },
{ href: '#tres', title: 'Three' },
{ href: '#cuatro', title: 'Four' },
{ href: '#cinco', title: 'Five' },
],
pageBackgroundColor: '#444',
pageTextColor: '#FFF'
};
teepee()
.use(tplObject) // sets the use object as tplObject
.tplById('demo-css', false) // synchronously sets the template string by the element where id="demo-css"
.css() // appends the rendered template as a style element to the document
.tplByUrl('example-external_script_tags.tpl.html', false) // synchronously sets the template string by file "example-external_script_tags.tpl.html"
.write(); // writes the rendered template
</script>Teepee is pumped up with features to allow you to start developing immediately.
A new instance of teepee is created by calling the Teepee function.
var tpA = teepee(); // an independent instance of teepee
var tpB = teepee(); // another independent instance of teepee
Sets the opening character(s) of Teepee code and returns the instance of Teepee. If nothing is passed, the current opening character(s) are returned.
tp.opener(); // returns the current opening character(s)
tp.opener( '@' ); // sets the opening character as "@"
tp.render( 'Hello, @=who}}!', { who: 'World' } ); // renders "Hello, World!"
Sets the closing character(s) of Teepee code and returns the instance of Teepee. If nothing is passed, the current closing character(s) are returned.
tp.closer(); // returns the current closing character(s)
tp.closer( '@' ); // sets the closing character as "~"
tp.render( 'Hello, {{=who@!', { who: 'World' } ); // renders "Hello, World!"
Sets the character(s) used to print and returns the instance of Teepee. If nothing is passed, the current printing character(s) are returned.
tp.printer(); // returns the current printing character(s)
tp.printer( '~' ); // sets the printing character as "~"
tp.render( 'Hello, {{~who}}!', { who: 'World' } ); // renders "Hello, World!"
Sets the character(s) used to begin an IF statement and returns the instance of Teepee. If nothing is passed, the current IF character(s) are returned.
tp.iffer(); // returns the current IF character(s)
tp.iffer( '^' ); // sets the IF character as "^"
tp.render( 'Hello, {{^isWorld}}World{{/isWorld}}!', { isWorld: true } ); // renders "Hello, World!"
Sets the character(s) used to begin an IF NOT statement and returns the instance of Teepee. If nothing is passed, the current IF NOT character(s) are returned.
tp.notter(); // returns the current IF NOT character(s)
tp.notter( '^' ); // sets the IF NOT character as "^"
tp.render( 'Hello, {{^isWorld}}World{{/isWorld}}!', { isWorld: true } ); // renders "Hello!"
Sets the character(s) used to begin a FOR statement and returns the instance of Teepee. If nothing is passed, the current FOR character(s) are returned.
tp.looper(); // returns the current FOR character(s)
tp.looper( '@' ); // sets the FOR character as "@"
tp.render( 'Hello,{{@planets}} {{=planets}}{{/planets}}!', { planets: ['Venus', 'Earth', 'Mars'] } ); // renders "Hello, Venus Earth Mars!"
Sets the character(s) used to end an IF/IF NOT/LOOP statement and returns the instance of Teepee. If nothing is passed, the current IF/IF NOT/LOOP ending character(s) are returned.
tp.ender(); // returns the current IF/IF NOT/LOOP ending character(s)
tp.ender( '$' ); // sets the IF/IF NOT/LOOP ending character as "$"
tp.render( 'Hello, {{?isWorld}}World{{$isWorld}}!', { isWorld: true } ); // renders "Hello, World!"
Sets the template string and returns the instance of Teepee. If nothing is passed, the current template string is returned.
tp.tpl(); // returns the current template string
tp.tpl( 'Hello {{=who}}' ); // sets the template string as "Hello {{=who}}"
Sets the template string based on an element's content and returns the instance of Teepee. If the element has a src attribute, the src file (which must reside on the same domain) will be used and may also be loaded asynchronously or synchronously.
tp.tplById('tpl-html-foo'); // asynchronously sets the template string by the element where id="tpl-html-foo"
tp.tplById('tpl-html-bar', false); // synchronously sets the template string by the element where id="tpl-html-foo"
Sets the template string based on a url (which must reside on the same domain) and returns the instance of Teepee. The url may also be loaded asynchronously or synchronously.
tp.tplByUrl('tpl.foo.html'); // asynchronously sets the template string by the contents of the file "tpl.foo.html"
tp.tplByUrl('tpl.foo.html', false); // synchronously sets the template string by the contents of the file "tpl.foo.html"
Sets the object to be used by the template and returns the instance of Teepee. If nothing is passed, the current use object is returned.
tp.use(); // returns the current use object
tp.use({ foo: 'bar' }); // sets the use object as { foo: 'bar' }
Extends the object to be used by the template and returns the instance of Teepee.
tp.use({ foo: 'bar' }).andUse({ baz: 'qux' }); // sets the use object as { foo: 'bar', baz: 'qux' }
Returns the rendered template.
tp.render(); // returns the rendered template
tp.render('Hello, {{=who}}!', { who: 'World' }); // returns "Hello, World!"
Writes the rendered template and returns the instance of Teepee.
tp.write(); // writes the rendered template
tp.write('Hello, {{=who}}!', { who: 'World' }); // writes "Hello, World!"
Appends the rendered template as a style element to the document and returns the instance of Teepee.
tp.css(); // appends the rendered template as a style element to the document
tp.css('body { background: {{=color}}; }', { color: '#000' }); // appends a style element containing "body { background: #000; }"
Teepee uses a dual MIT/GPL-2.0 License. The MIT License is recommended for most projects, because it is simple, easy to understand, and it places almost no restrictions on what you can do with Teepee. If the GPL-2.0 License suits your project better, then you are also free to use Teepee under that license.
You don't have to do anything special to choose one license or the other, and you don't have to notify anyone which license you are using. You are free to use Teepee in commercial projects as long as the copyright header is left intact.
- Fork it.
- Create a branch. (
git checkout -b my_teepee) - Commit your changes. (
git commit -am "Added Awesomeness") - Push to the branch. (
git push origin my_teepee) - Create an Issue with a link to your branch.
- Enjoy a refreshing Coca Cola Classic (you earned it!) and wait.