Teepee is a templating system for JavaScript, ideal for creating websites, webapps, or anything else - quickly. Teepee is stable, fast, easy, and even lets you control the syntax (and all of this in 1KB).
To use Teepee, include this script anywhere in your page. You can even hotlink to the latest Teepee (well, you can't in IE9). Woot ('cept for IE9)!
<script src="//raw.github.com/rezitech/teepee/master/teepee.js"></script>Teepee syntax is both easy to use, and completely customizable. By default, Teepee's syntax is like that of Mustache, an absolutely fantastic markup language (which is itself based on CTemplate). Awesome!
<body>
<script src="//raw.github.com/rezitech/teepee/master/teepee.js"></script>
<script>
var tp = new Teepee();
tp.write(
'Hello, {{=who}}!',
{ who: 'World' }
); // prints "Hello, World!"
</script>
</body>Use simplified IF and IF NOT statements in your templates for even more dynamic control. Oh yea!
<body>
<script src="//raw.github.com/rezitech/teepee/master/teepee.js"></script>
<script>
var tp = new Teepee();
tp.write(
'Hello{{?isEarth}}, Earth{{/isEarth}}{{?isMars}}, Mars{{/isMars}}!',
{ isMars: false, isEarth: true }
); // prints "Hello, Earth!"
</script>
</body>Use a simplified loop statement in your templates to loop through an array. Uhuh uhuh uhuh!
<body>
<script src="//raw.github.com/rezitech/teepee/master/teepee.js"></script>
<script>
var tp = new Teepee();
tp.write(
'Ask these questions:{{#q}} {{=q}}{{/q}}.',
{ q: ['Who', 'What', 'Where', 'When', 'Why'] }
); // prints "Ask these questions: Who What Where When Why."
</script>
</body>You can change Teepee's syntax to your heart's content. Yay!
<body>
<script src="//raw.github.com/rezitech/teepee/master/teepee.js"></script>
<script>
var t = new Teepee();
t.opener('@').closer('@').printer('$');
t.write(
'The quick @$jumper@ jumps over the @$jumpee@.',
{ jumper: 'brown fox', jumpee: 'lazy dog' }
); // prints "The quick brown fox jumps over the lazy dog."
</script>
</body>That's right, you may have noticed that most functions in Teepee are chainable (like jQuery). Nice!
You can even use templates in <script> tags to make your entire page. Sweet!
<body>
<script src="//raw.github.com/rezitech/teepee/master/teepee.js"></script>
<script id="demo-template" type="text/html">
<h1>
{{=pageTitle}}
</h1>
<p>
{{=pageDescription}}
</p>
</script>
<script>
demoObject = {
pageTitle: 'My 1997 Website',
pageDescription: 'Hello and welcome to my awesome website.'
};
tp = new Teepee();
tp.tplById('demo-template').use(demoObject).write();
</script>
</body>You can even use external templates in <script> tags to make your page as well as style it Sass-style. Nifty!
<body>
<script src="//raw.github.com/rezitech/teepee/master/teepee.js"></script>
<script src="demo-advanced.tpl.html" id="demo-html" type="text/html">
<-- Contents of "demo-advanced.tpl.html" -->
<h1>
{{=pageTitle}}
</h1>
<nav>
<ul>
{{#pageNavigation}}
<li>
<a href="{{=pageNavigation.href}}">{{=pageNavigation.title}}</a>
</li>
{{/pageNavigation}}
</ul>
</nav>
</script>
<script src="demo-advanced.tpl.css" id="demo-css" type="text/css">
/* Contents of "demo-advanced.tpl.css" */
body {
background: {{=pageBackgroundColor}};
color: {{=pageTextColor}};
}
a {
color: {{=pageTextColor}};
text-decoration: none;
}
</script>
<script>
demoObject = {
pageTitle: 'My HTML5 1997 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'
};
</script>
<script>
var tp = new Teepee();
tp.use(demoObject);
tp.tplById('demo-css', false).writeCSS().tplById('demo-html', false).write();
</script>
</body>Teepee's filled with functionality that will allow you to start developing immediately.
_tp_ = new Teepee()_tp_.opener
_tp_.opener ( _chars_ )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.
- chars
- The character(s) to be used.
_tp_.closer
_tp_.closer ( _chars_ )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.
- chars
- The character(s) to be used.
_tp_.iffer
_tp_.iffer ( _chars_ )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.
- chars
- The character(s) to be used.
_tp_.notter
_tp_.notter ( _chars_ )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.
- chars
- The character(s) to be used.
_tp_.looper
_tp_.looper ( _chars_ )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.
- chars
- The character(s) to be used.
_tp_.printer
_tp_.printer ( _chars_ )Sets the character(s) used to print a variable and returns the instance of Teepee. If nothing is passed, the current printing character(s) are returned.
- chars
- The character(s) to be used.
_tp_.tpl ( _tpl_ )Assigns the template string and returns the instance of Teepee. If nothing is passed, the current template string is returned.
- tpl
- The string to be used.
_tp_.tplById ( _id_, _async_ )Sets the template string, based on an element's content and returns the instance of Teepee. If the element is a script tag with a src attribute, the local source will be used.
- id
- The id of the element.
- async
- The optional boolean of whether to load the template asynchronously. Defaults true.
_tp_.use ( _use_ )Sets the object to be used by the template and returns the instance of Teepee. If nothing is passed, the current object is returned.
- use
- The object to be used.
_tp_.render
_tp_.render ( _tpl_ , _use_ )Returns the rendered template.
- tpl
- The optional string of the template. Defaults to the stored string.
- use
- The optional object to be used by the template. Defaults to the stored object.
_tp_.write ( _tpl_ , _use_ )Writes the rendered template to the document and returns the instance of Teepee.
- tpl
- The optional string of the template. Defaults to the stored string.
- use
- The optional object to be used by the template. Defaults to the stored object.
_tp_.writeCSS ( _tpl_ , _use_ )Writes the rendered template to a style element in the document and returns the instance of Teepee.
- tpl
- The optional string of the template. Defaults to the stored string.
- use
- The optional object to be used by the template. Defaults to the stored object.
- 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent