Jade mixins example

mixins.jade

// Writing JS for everything is great and all, but I don't want to see JS
// inline in my Jade templates. Thankfully, there are ways of abstrating it
// into mixins!

// Want some Rails-like helpers?
mixin link_to(name, href)
  - href = href || "#"
  a(href="#{href}")= name

// How about a single editing point for a class name?
mixin button(name, href)
  - href = href || "#"
  a.button(href="#{href}")= name

// Iterating over collections to wrap them in an element? Send the tag name and
// collection to have it handle the syntax for you
mixin element_list(el, collection)
  each item in collection
    #{el}=item

// Convenience mixin for th elements
mixin th_list(collection)
  +element_list("th", collection)

// Convenience mixin for li elements
mixin li_list(collection)
  +element_list("li", collection)

// Repeat a block without writing inline JS
mixin times(limit)
  - for (var i = 1; i <= limit; i++) {
    block
  - }

// And now for something completely different. Need to spit out the days of the
// week, but want to be able to specify a starting day? This baby takes the
// wrapping element and an optional string representing what day you want to
// start with. It outputs each day starting with that one.
mixin days_of_the_week(el, start)
  - start = start || "Sunday"
  - days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
  - if (days.indexOf(start) === -1) { start = "Sunday"; }
  - for (var i = days.indexOf(start); i < 7; i++) {
    #{el}= days[i]
  - }
  - for (var i = 0, len = days.indexOf(start); i < len; i++) {
    #{el}= days[i]
  - }