tbeseda
5/22/2012 - 10:24 PM

How I do one-off front-end templating with Handlebars, HAML, and CoffeeScript.

How I do one-off front-end templating with Handlebars, HAML, and CoffeeScript.

%script#instagram-thumbnail-popover{type: "text/x-handlebars-template"}
  %img{src: "{{images.low_resolution.url}}"}/
  %i.icon-heart/
  {{likes.count}} likes

%script#instagram-thumbnails{type: "text/x-handlebars-template"}
  %ul.thumbnails
    {{#data}}
    %li.span1
      %a.thumbnail{href: "{{link}}", title: "{{caption.text}}", data: {content:"{{> popover}}"}}
        %img{src: "{{images.thumbnail.url}}"}
    {{/data}}
$ ->
  Handlebars.registerPartial 'popover', $('#instagram-thumbnail-popover').html()
  instagram_template = Handlebars.compile $('#instagram-thumbnails').html()

  $.getJSON "/instagram/#{instagram_handle}", (response) ->
    instagram_html = instagram_template response
    $instagram.append instagram_html
    $instagram.find('.thumbnail').popover placement: 'bottom'