Skip to content

Instantly share code, notes, and snippets.

@shaneriley
Created February 10, 2014 20:10
Show Gist options
  • Save shaneriley/8923267 to your computer and use it in GitHub Desktop.
Save shaneriley/8923267 to your computer and use it in GitHub Desktop.
Jade mixins example
// 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]
- }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment