

YATE, JavaScript Templating - rkanadam

We played around with Greg Borenstein's $.srender  (based on John Resig's JS templates) and Rizqi Ahmad's chain.js (http://wiki.github.com/raid-ox/chain.js/demos). We liked chain.js's syntax but wanted $.srender's speed. In addition to which we were looking for something that would be valid XML / XHMTL so that the page could be previewed before actually running the template itself. So Jeff came up with YATE (http://labs.mudynamics.com/2010/03/19/yate-javascript-templating-engine-for-agile-ui-development/), Yet Another Templating Engine.<p>Would appreciate your feedback.
======
grayrest
I, at least, would prefer you link the article directly instead of making it a
pseudo-ask HN. That said...

Overall, I think it's pretty neat and not too far off what I've been thinking
about doing for a in-browser templating language. I think you could get the
syntax looking cleaner if you were to model it after one of the Python TALs,
e.g. Genshi [1].

[1] <http://genshi.edgewall.org/>

It'd look something like:

    
    
        <tr class="content-row">
            <td style="text-align:left;">
                <a href="${link|'#'}" yt:content="title">Atlantis</a>
            </td>
            <td yt:content="status.queuenum">-</td>
            <td yt:content="status.progress">
                <div class="bar_container">
                    <div class="bar_inner"></div>
                </div>
            </td>
            <td><span yt:replace="date">03/10/2010</span></td> <!-- using replace just to show it -->
        </tr>
    

I'm particularly fond of having filter functions in a templating language
(number formatting, whitespace stripping, etc), so I've switched to my
preferred string interpolation sequence and tossed in `|` as the filter
separator and the single quoted string as the default when the data is null or
undefined (sytax comes from jsontemplate). If you wanted to keep the complete
separation, copying mustache's `{{variable}}` syntax wouldn't hurt. I'd
suggest that yt:content/replace leave their values alone when null/undefined.

Finally, I'm confused about why remove is part of the language. In the similar
languages I've worked with, it's called 'when' and takes a boolean so that you
can do simple branching.

