gloomy.js :[

Templates

Write your templates by using plain HTML in a <script> element. You must put your variables between a gloomy expression (e.g. :[foo.bar]).

<script id="user-template" type="text/gloomy">
    <li id=":[id]" class="user-box">
        <h2 class="user-box-title">
            <a href=":[website]">:[user.fullname]</a>
        </h2>
        <img src=":[user.pic]" width="80" height="80" alt=":[user.fullname]" class="user-box-avatar">
        <a href="https://twitter.com/:[username]">@:[username]</a>
    </li>
</script>
            

Data

Create your model data as JSON objects.

var user = [
    {
        'id': 1,
        'username': 'pazguille',
        'website': 'http://pazguille.me',
        'user':{
            'fullname': 'Guille Paz',
            'pic': 'http://twitter.com/api/users/profile_image/pazguille?size=bigger'
        }
    },
    {
        'id': 2,
        'username': 'frontendrescue',
        'website': 'http://uptodate.frontendrescue.org/',
        'user':{
            'fullname': 'Front-end Rescue',
            'pic': 'http://twitter.com/api/users/profile_image/frontendrescue?size=bigger'
        }
    }
];
            

Render

You should create a container to insert the result of a template rendered with the data.

<ul id="user-list"></ul>
            

Then, create a new instance of Gloomy and enjoy!

var view = document.querySelector('#user-template'),
    container = document.querySelector('#user-list'),
    gloomy = new Gloomy(view, container);

gloomy.render(data);
            

Result