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>
- } ;
print qq{
<a href="http://draft.blogger.com/$link">Link</a>
} ;
to something more like.
- print $cgi->a( { href=> $link } , 'Link' ) ;
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() ;
- }
- )
- ;
-
-
- 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'
- ) ;
$.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 append
s 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?