title: Conditionally styling the last element in a knockout.js foreach loop
body: <p>I have a small chunk of code that I believe should work, line broken for clarity here:</p>
  
  <pre><code>&lt;!-- ko foreach: customer.address --&gt;
      &lt;span data-bind="style: { display: $index() === ($parent.data().length -1) 
                          ? 'inline-block' : 'block' }, text: $data.text"&gt;&lt;/span&gt;
  &lt;!-- /ko --&gt;
  </code></pre>
  
  <p>My aim here is to loop around printing out span elements, most of which are set to <code>display: block</code> and the last is set to <code>display: inline-block</code>.  It does not appear to matter how I bracket up the conditional, it doesn't work and returns this error:</p>
  
  <pre><code>Uncaught TypeError: Unable to process binding "foreach: function (){return customer.address }"
  Message: Unable to process binding "style: function (){return { display:$index() ===($parent.data().length -1) ?'inline-block':'block'} }"
  Messag...&lt;omitted&gt;...a'
  </code></pre>
  
  <p>Modifying the conditional to something that otherwise evaluates to true is fine, e.g. `display: (1 === 1) ? 'inline-block' : 'block'.  Of note also is that the conditional to check for the last element is also OK, under other circumstances, and came from this SO question: </p>
  
  <p><a href="https://stackoverflow.com/questions/9185821/knockout-js-foreach-binding-test-if-last-element">Knockout.js foreach binding test if last element</a></p>
  
  <p>How should I go about conditionally applying a style or other attribute to the last element in a foreach loop?  I am trying to avoid having two <code>&lt;!-- ko if: --&gt;</code> and two different <code>&lt;span&gt;</code> lines, but if that's what's needed then let me know.</p>