Jade Templates - Dynamically Calling A Mixin

How can I use a string from the json being fed into a Jade template to dynamically load a mixin? Below, the goal is for twoColumn.jade to load the foo and bar mixins. twoColumn.jad

Solution 1:

This is a feature that is not very obvious in Jade, as it is not explicitly mentioned in the documentation. You can actually use the interpolation syntax (#{...}) for dynamically choosing the mixin name.

From the Jade language guide:

interpolation? yup! both types of text can utilize interpolation, if we passed { name: 'tj', email: 'tj@vision-media.ca' } to the compiled function we can do the following:

#user #{name} <#{email}>

outputs <div id="user">tj &lt;tj@vision-media.ca&gt;</div>

Example usage:

mixin foo(item)
  p Foo called

mixin bar(item)
  p Bar called

mixin twoColumns(obj)
  .container-fluid
    .row(class=obj.class)
      for item in obj.items
        .col-xs-12.col-sm-3
          +#{item.template}(item)