title: Non-repeated element inside KnockoutJS foreach loop
body: <p>I am trying to create a knockout.js component (with CSS3 grids) that displays a bunch of sub-components, which I know can be done via something like:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="items grid" data-bind="foreach: { data: items, as: 'item' }"&gt;
      &lt;item-component params="data: item" class="grid-item"&gt;&lt;/item-component&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is that I cannot figure out how to put a non-repeated item into this list. Ultimately, I want to generate something along these lines:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="items grid"&gt;
      &lt;div class="something-else grid-item"&gt;&lt;/div&gt;
      &lt;item-component class="grid-item"&gt;&lt;/item-component&gt;
      &lt;item-component class="grid-item"&gt;&lt;/item-component&gt;
      &lt;item-component class="grid-item"&gt;&lt;/item-component&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The reason I can't just put the <code>something-else</code> outside of the <code>foreach</code>-bound element is that it's also a grid item, so it has to be a direct child of the grid. It crossed my mind to manually append it via jquery's <code>append</code>, but with MVVM, that's a terrible idea (it doesn't work anyway).</p>
  
  <p>Does anyone know a way to do this with knockout.js?</p>