0.0.4 • Published 12 years ago
coffeete v0.0.4
CoffeeTe
Templating with CoffeeScript
Installation
Open your cozy terminal and write:
git clone git://github.com/icetan/coffeete.git
cd coffeete
With NPM for Node.js
npm install
Or with Ender for the browser
ender build .
How
It is very simple and very little code. It uses the CoffeeScript compiler for string interpolation. The tool chain: CoffeeTe -> CoffeeScript -> JavaScript.
Examples
Our template
<script id="about-me" type="text/x-coffeete">
<h1>#{cap name}</h1>
<p>
#{about}
</p>
<ul>
!{for hobby in hobbies
<li class="#{if _i%2 then 'even' else 'odd'}">
#{hobby}
</li>
}!
</ul>
</script>
The view data
var view = {
name: "christopher"
, about: "I like grapefriut."
, hobbies: ["Computers", "Martial Arts", "Coffee"]
, cap: function (str) {
return str.slice(0,1).toUpperCase()+str.slice(1);
}
};
In the browser
var str = document.getElementById('about-me').text
// Compile a CoffeeTe string to a template function ready to recieve data.
, template = coffeete(str)
// Run our compiled template with the view data to get a ready HTML string.
, html = template(view);
// Fill the page with our newly rendered HTML.
document.getElementsByTagName('body')[0].innerHTML += html;
With Node.js
var str = fs.readFileSync('about-me.chtml').toString()
, template = coffeete(str)
, html = template(view);
// Write to a static HTML file or serve directly over HTTP.
fs.writeFile('about-me.html', html);
The result
<h1>Christopher</h1>
<p>
I like grapefriut.
</p>
<ul>
<li class="odd">
Computers
</li>
<li class="even">
Martial Arts
</li>
<li class="odd">
Coffee
</li>
</ul>