Cookie Notice

As far as I know, and as far as I remember, nothing in this page does anything with Cookies.

2012/07/23

The Quest For Javascript Templating

I first heard about templating several years ago at YAPC::NA 2006, when Ingy döt Net talked about Template Toolkit. I honestly did not get it then. I was putting my HTML in my code at the time, and I just didn't get it.

Soon after, I started working at the Lab, and Lab standard was to use CGI, so I started to do that, and my code went from:
print qq{
    <a href="http://draft.blogger.com/$link">Link</a>
    } ;

to something more like.

print $cgi->a( { href=> $link } , 'Link' ) ;

That example is simple enough, but it gets complicated when you're putting together a large table of tabular data. (I feel I must explain that I'm tables for their proper purpose.) The Lab is now moving toward using Dancer as our framework (we don't have it fully implemented yet, but I have some things very close) and thus use Template Toolkit fairly regularly, and I foresee a day in which I won't need to have massive bricks of code to put together my HTML. At least in Perl.

Javascript, that's another matter.

    $.get(
        apr.chip_url ,
        function ( data ) {

            $( '<fieldset id="chip_field">')
                .addClass( 'narrow_fieldset' )
                .appendTo( chip_div ) ;
            $( '<legend>')
                .text( "Chips" )
                .appendTo( chip_field ) ;

            $( '<div id="select_div" />' )
                .appendTo( chip_field ) ;
            $( '<select name="chip_sel" id="chip_sel">')
                .appendTo( select_div ) ;

            $( '<div id="control_div" />' )
                .text( ' Include Control?: ' )
                .appendTo( chip_field ) ;
            $( '<input type="checkbox" />' )
                .attr('id',"control")
                .attr('name',"control")
                .val("control")
                .prependTo( control_div ) ;

            $( '<div id="submit_div" />' )
                .appendTo( chip_field ) ;
            $( '<div class="button" />' )
                .text( 'Choose Chip' )
                .appendTo( submit_div )
                .click(
                    function () {
                        apr.write_chip() ;
                        }
                    )
                ;

            // Fill the Select
            var d_list = [] ;
            for ( var i in data ) { d_list.push( i ) }
            d_list = d_list.sort() ;
            for ( var d in d_list ) {
                var i = d_list[ d ] ;
                $( '<option/>')
                    .text( data[i].name )
                    .val( i )
                    .appendTo( chip_sel ) ;
                }
            } ,
            'jsonp'
        ) ;

This is some live Javascript I wrote. It uses jQuery, because if you don't use a framework of some sort to handle then differences between browsers, you are asking for trouble, and I've since discovered some ways to do appends better, but this is exactly the big block of ugly stuff that I hated with CGI and made me pledge my babies to Template Toolkit.

So, what I'm in desperate need for is Template.js to go with Template.pm. Or the like. I am sure that this is not just my problem. I am sure that other people have hit this problem and created a solution. Can anybody point to a good solution?