Super Simple Coffeescript Templating
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Super Simple CoffeeScript Templating

Batik is an inline templating engine for CoffeeScript, inspired by CoffeeKup, that lets you write your template directly as a CoffeeScript function

Why Using Batik?

Batik lets you write your template directly in CoffeeScript an it will compile to javascript like your other .coffee files do. No on-runtime parsing are needed, no eval, so it's probably blazing fast.


Just grab node.js and npm and you're set:

npm install batik


Using batik is simple

batik = require 'batik'

myTemplate = batik (title, desc) ->
    @h1 title
    @p desc

# using node.js's util.puts
puts myTemplate("Batik", "Batik is traditional textile dyeing technique originated from Java")


<p>Batik is traditional textile dyeing technique originated from Java</p>

You can write nested elements just like in CoffeeKup:

hcard = batik ({name, surname, tel, email, address, website}) ->
    @div "hcard-#{name.split(' ').join('-')}-#{surname}", class:'vcard', ->
        fn = ->
            @span class:'given-name', name
            @span class:'family-name', surname

        if website
            @a class:'url fn n', href:website, fn
            @span class:'fn n', fn

        @a class:'email', href:"mailto:#{email}", email
        if address
            {street, city} = address
            @div class:'adr', ->
                @span(class:'street-address', street) if street
                @span(class:'locality', city) if city
        if tel
            @div class:'tel', tel

# using node.js's util.puts
puts hcard
    name: 'Ahmad Rizqi'
    surname: 'Meydiarso'
    tel: '+49 99 9999 9999'
    email: ''
    address: {city: 'Hamburg'}
    website: ''


<div class="vcard" id="hcard-Ahmad-Rizqi-Meydiarso">
    <a class="url fn n" href="">
        <span class="given-name">Ahmad Rizqi</span>
        <span class="family-name">Meydiarso</span>
    <a class="email" href=""></a>
    <div class="adr">
        <span class="locality">Hamburg</span>
    <div class="tel">+49 99 9999 9999</div>

You can also use it with MVC framework like Backbone.js or any other and make use of it's render proxy

view =
    items: [
        {city:'Jakarta', country:'Indonesia'}
        {city:'Hamburg', country:'Germany'}
    renderItem: batik ({city, country}) ->
        @li class:'item', ->
            @h2 city
            @p country

    render: batik ->
        @h1 "Cities and Its Countries"
        @ul ->
            for item in @self.items
                @render 'item', item # this calls renderItem

puts view.render()


<h1>Cities and Its Countries</h1>
    <li class="item">
    <li class="item">