title: Jade Templates - Dynamic Attributes
body: <p>I want to create attributes on the fly for some html elements.</p>
  
  <p>In my case I'd like to set (or not) a disabled attribute according to <code>user.role</code>.</p>
  
  <p>So, if <code>user</code> has permission to edit some field, I do not want to put disabled attribute on the element. Otherwise, I do want it.</p>
  
  <p>I know that I can do this with these approaches:</p>
  
  <h3>- Approach 1 - Use Conditionals</h3>
  
  <pre><code>if (user.role === 1)
     input(type='text', name='foo')
  else
     input(type='text', name='foo', disabled)
  </code></pre>
  
  <h3>- Approach 2 - Plain HTML</h3>
  
  <pre><code>- var disabledAttr = (user.role === 1) ? "disabled" : "";
  | &lt;input type="text" name="foo" #{ disabledAttr} /&gt;
  </code></pre>
  
  <p>Approach 1 is bad because I need to repeat some code. With Approach 2 I do not need to repeat code but I have to use plain HTML instead of Jade markup.</p>
  
  <p>I tried something like this:  </p>
  
  <pre><code>input(type='text', name='foo', #{ disabledAttr} )
  </code></pre>
  
  <p>But jade generates the following code:</p>
  
  <pre><code>&lt;input type="text" name="foo" disabledattr="" /&gt;
  </code></pre>
  
  <p>Any better idea?</p>