Javascript-templates (og AJAX-lasting med jQuery)

Mustasjen er i anmarsj, og ikke bare i ansiktet til hipstere. Mustache er et rammeverk for templates, eller maler, som også er tilgjengelig i Javascript. Det tillater deg enkelt og greit å definere strenger med HTML og forskjellige tagger for å representere variabler. Veldig greit om du er glad i å bruke massevis av $('foo').append('lang HTML-kode her').

Enda bedre er det selvfølgelig når man bare kan laste inn templates med AJAX og dermed kunne ha et lite lager med templates liggende. Mustache støtter i tillegg seksjoner, og med rett bruk kan du faktisk klare deg med en enkelt fil.

Eksempel:

var foo = '<strong>{{foo}}</strong>';
Mustache.to_html({'foo': 'bar'}, foo);

Blir faktisk til

<strong>bar</strong>

Hvis vi tar det videre og benytter oss av seksjoner, kan vi gjøre noe som dette:

var foo = '<ul>{{#section}}<li><a href="{{url}}">{{name}}</a></li>{{/section}}</ul>';

Mustache.to_html({
  'section': [
    {'name': 'Ola Nordmann', 'url': 'http://facebook.com/ola.nordmann'},
    {'name': 'Kirsten Giftekniv', 'url': 'http://facebook.com/kirsten.gift'}
  ]
}, foo);

HTML-koden som kommer ut av dette, blir da:

<ul>
	<li><a href="http://facebook.com/ola.nordmann">Ola Nordmann</a></li>
	<li><a href="http://facebook.com/kirsten.gift">Kirsten Giftekniv</a></li>
</ul>

Med andre ord så takler rammeverket fint å traversere arrays. Så kan vi se videre på å skrive en plugin til jQuery. Mitt eget er veldig enkelt, og API-et er som følger:

$.renderTemplate(template, data, function(html) {
  $(someObject).append(html);
});

Selve kildekoden til jQuery-pluginen ser da slik ut:

$.loadTemplate = function(template, fn) {
    $.ajax(template, { 'cache': false, 'success': fn }); // cache bør du vurdere selv om du vil slå av eller på
}

$.renderTemplate = function(tepmlate, data, fn) {
  $.ajax(template, {
    'cache': false,
    'success': function(raw) {
      fn(Mustache.to_html(raw, data));
    }
  });
}

//Eksempel:
$.renderTemplate('/templates/foo.txt', {
  'section': {
    'foo': 'bar',
    'bar': 'baz'
  }
}, function(html) {
  $('en eller annen selector').append(html);
}