RSS

Tag Archives: jade

Navbar template (Bootstrap / Jade)

The navbar template translated into Jade.

Here it is

nav.navbar.navbar-default.navbar-fixed-top.navbar-inverse
  div.container
    div.navbar-header
      button.navbar-toggle.collapsed(type="button", data-toggle="collapse", data-target="#navbar-full", aria-expanded="false")
        span.sr-only Toggle navigation
        span.icon-bar
        span.icon-bar
        span.icon-bar
      a.navbar-brand(href="#")
        img(alt="Logo", src="...")

    div.navbar-collapse.collapse(id="navbar-full")
      ul.nav.navbar-nav.navbar-right
        li
          a(href="#")
            span.glyphicon.glyphicon-asterisk(aria-hidden="true")  
            span.menulabel.visible-md-inline.visible-lg-inline One
        li.dropdown
          a.dropdown-toggle(href="#", data-toggle="dropdown", role="button", aria-haspopup="true", aria-expanded="false")
            span.glyphicon.glyphicon-heart(aria-hidden="true")  
            span.menulabel.visible-md-inline.visible-lg-inline Two
            span.caret 
          ul.dropdown-menu
            li: a(href="#") Two / One
            li: a(href="#") Two / Two
            li.divider(role="separator")
            li: a(href="#") Two / Three
        li
          a(href="#")
            span.glyphicon.glyphicon-music(aria-hidden="true")  
            span.menulabel.visible-md-inline.visible-lg-inline Three
Advertisements
 
Leave a comment

Posted by on 2015/06/29 in dev

 

Tags: , ,

I’m starting to wear Mustaches

It sounds easy, but the recipe includes Mustache/Handlebars Jade and un-named arrays of items 🙂

Who renders?

I love the Jade syntax and it’s natural to me to use it in the Express.js workflow. You write (clean!) templates, the middleware does the rest.
Everything looks good but I was missing a template engine for javascript objects. I used Angular.js but it is a fence too tight to me (I happily embrace the single responsibility principle).

So I tried Handlebars and (with a couple of tweaks) it works like a charm! Just remember the workflow:

  • Express.js renders (server-side) the Jade template into plain html
  • the browser renders (client-side) the Handlebars template previously generated

How

  1. assign to the container tag a custom attribute (I use something like “< ul handlebars=users …“)
  2. write the handlebar template inside the container
  3. bind the javascript context to the data attribute of the container ($(“[handlebars=users]”).data([…])). Please note I’m using an array
  4. render the whole thing

The render engine

This is easy: take the data, take the html, mix together, done.

 $("[handlebars=users]").data("hbar", [
  { _id:1, name:"test 1" }
  , { _id:2, name:"test 2" }
  , { _id:3, name:"test 42" }
]);

(..)

$(document).ready(function() {
  $("[handlebars]").each(function(i,o) {
    var $o = $(o);
    var data = $o.data();
    var template = Handlebars.compile($o.html());
    $o.html(template(data));
  });
});

The previous code doesn’t work very well with json over web-services and late bindings, so I built a function to do this:

function handlebar_bind($elem, url) {
  if ($elem && $elem.length>=0) {
    if (typeof url == "string") {
      $.ajax({
        url: url,
        //jsonp: "callback",
        //dataType: "jsonp",
        dataType: "json",
        success: function(data) {
          var template = Handlebars.compile($elem.html());
          $elem.html(template(data));
        },
        error: function(XHR, textStatus, errorThrown) {
          console.log(XHR);
          console.log(textStatus);
          console.log(errorThrown);
        }
      });
    }
    else { // url is an object or array
      var template = Handlebars.compile($elem.html());
      $elem.html(template(url));
    }
  }
}

Repeaters

Do you remember we bound an array to the html tag? Now you can use the built-in each helper, remembering that this and . refers to the context’s item.
I’ll do the binding via the following script:

<ul>
{{#each .}}
  <li>{{this.name}}</li>
{{/each}} 
</ul>

I also found this syntax (more readable):

{{#each . as |user|}}
 ..
 <li>{{user.name}}</li>
 ..

…and Jade?

The safest way to add a handlebar template to the Jade syntax is to use comments:

div(handlebars="mylist")
  // {{#each .}}
  span {{this}}
  // {{/each}} 

It will be rendered as an html comment and it will not hurts your html. I do prefer comments because they don’t break the DOM (i.e inside a table BUT outside a td), but many use plain text instead:

| {{#each .}}
 
Leave a comment

Posted by on 2015/06/16 in dev

 

Tags: , , , ,