Jade + Underscore

Salve galera,

Aqui vou mostrar como usar o template javascript underscore dentro de templates jade.

 Primeiro vamos criar os templates jade


layouts/main.jade

doctype html
html
  head
    meta(http-equiv='http-equiv', content-type='Content-type', content='text/html; charset=utf-8')
    link(rel='stylesheet', href='/stylesheets/foundation.css') 
    link(rel='stylesheet', href='/stylesheets/foundation/icons/foundation-icons.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
    title Mobile Mind
      block title 

  body
    header    
      .row
        .large-12.columns
          nav.top-bar(data-topbar)
            ul.title-area
              li.name
                h1
                  a Delicious Food
              li.toggle-topbar.menu-icon
                a
                  span menu

            section.top-bar-section

              ul.left
                li.divider
                li.has-form
                  .row.collapse
                    .large-8.small-9.columns
                      input(type='text', placeholder="Find Stuff...")
                    .large-4.small-3.columns
                      a.alert.button.expand.btn-search(href="#") Search
              ul.right
                li.divider
                li.has-dropdown
                  a(href="#") Categorias
                  ul.dropdown
                    each it in ['A', 'B', 'C', 'D', 'E']
                      li 
                        a(href="#") Categoria #{it}

      
    block content

    footer.row
      .large-12.columns
        hr
        .row
          .large-6.columns
            p 
              @ Copyright Mobile Mind
          .large-6.small-12.columns
            ul.inline-list.right
              li 
                a(href="http://www.mobilemind.com.br", target="_blank") www.mobilemind.com.br

  

  script(src="js/script.js")

index.jade 

extends layouts/main

block title
  |  Store
block content
  
  .row    
    .large-4.small-12.columns
      img(src="http://lorempixel.com/500/500/food")
      .custon-panel-alert
        h3 Delicious Food
        h5.subheader
          | Come eat here!!

      a(href="#")
        .custon-panel-main          
          h6 99 items in your cart      
    
    .large-8.columns
      a(href="#storeItems/50/10") load
    .large-8.columns
      .row.items-main                            

    .large-8.columns
      hr
      .pagination-centered
        ul.pagination
          li.arrow.unavailable
            a(href="#") «
          li.current
            a(href="#") 1
          each it in [2, 3, 4, 5]
            li
              a(href="#") #{it}
          li.unavailable
            a(href="#") …
          each it in [12, 13, 14, 15]
            li
              a(href="#") #{it}
          li.arrow
            a(href="#") »
  
  include extra/item.jade

extra/item.jade 

#item_template.hidden  
  .large-4.small-6.columns
    .item-row
      .panel.item-header
        h5 
          | {{ it.name }}
      .item-body
      img(src="http://lorempixel.com/500/500/food")
      .panel.item-footer
        .large-5.columns
          h6.subheader 
            | {{ it.price }}
        .large-7.columns
          a.button.alert.tiny(href="#") 
            i.fi-shopping-cart.small

Explicando:

Criamos um arquivo de layout principal, que é o main.jade. Depois um index, que usa o layout principal.. e depois o item.jade.. que contém nosso template que será usada no handlebars. Agora, no script.js vamos criar o código de carregamento da listagem de items, via ajax:

script.coffee 

       _.templateSettings = {
      interpolate: /\{\{(.+?)\}\}/g
        }
        template = _.template $('#item_template').html()           
        el = '.items-main'
        $.ajax 
   url: ContextPath + "/store/items?" + $.param {offset: 0, max: 10}
   dataType: 'json'
   success: (data, textStatus, jqXHR) ->     
     for it in data
              $(el).append template({it: it})
   error: (jqXHR, textStatus, errorThrown) ->
            console.log textStatus

Atenlção! 

Veja a alteração na sintaxe do undercode definida na váriavel templateSettings. Fazendo essa definição podemos usar as váriaveis no jade com {{ variavel }} (igual ao mustache). Também veja que no template definimos uma div com class hidden, pois como é um template não ficará visivel na página.

Para isso fucionar você deve adicionar as fererências para jquery e underscore em seu projeto bem assim como complilar o coffee e jade de algum modo.. Em outro artigo aqui no blog mostro como fazer toda essa integração usando grails e gulp, ou só gulp e html. 

Isso é um exemplo estrutural.. então para funcionar tem que modificar algumas coisas.

Até a próxima