title: Jade Mixin - with object manipulation
body: <p>I am attempting to programmatically display/render objects within a jade template, achieved by passing an array of objects to the view. The goal is to display a grid view with a maximum of 3 items/objects per row. I encountered an issue with nested elements self closing within in-line code blocks.</p>
  
  <p>I have started experimenting with Mixins in order to achieve my goal:</p>
  
  <pre><code>mixin testCase_Columns(obj)
  - for (var i = 0; i &lt; obj.length; i++)
     if (i%3==0)
       div.row
          +renderObj(i, obj)
  </code></pre>
  
  <p>The above logic identifies if the current object number within my array is divisible by 3. This is how i intend to control rendering 3 items/objects per row. From here i pass the object and counter variable to a second mixin:</p>
  
  <pre><code>mixin renderObj(i, obj)
    - for(var xx = 0; xx &lt;3 ; xx++)
        div.col-lg-4
          p='Object:' + obj[i].proj
          **- i++**
  </code></pre>
  
  <p>Above, i render three columns and add 1 to my counter 'i', 'i' in this case is used to state my object array key.</p>
  
  <p>The problem i have is when i include the i++ increment statement jade returns the error:</p>
  
  <pre><code>type error: Cannot read property 'proj' of undefined 
  </code></pre>
  
  <p>However i have performed various tests including accessing and printing each object by manually stating key: </p>
  
  <pre><code>obj[1].proj / obj[2].proj / obj[3].proj for example. 
  </code></pre>
  
  <p>When I attempt to add an increment statement it blows up in my face.</p>
  
  <p>I am still learning node / jade etc. Perhaps my coding is incorrect. I am aware the above code statement lack fundamental logic to render a final row correctly which contains less than three objects but at the moment i am only testing.   </p>
  
  <p>Any help would be much appreciated.</p>
  
  <p>Thanks in advance.</p>