title: knockout js : foreach binding adding a static element
body: <p>I want to do some paging for a list of observables. I use bootstrap for the styling, and in their <a href="http://getbootstrap.com/components/#pagination" rel="noreferrer">documentation</a> they use unsorted list to display the links for the pages.</p>
  
  <p>Let's suppose we have the following code in the view: </p>
  
  <pre><code>&lt;ul class="pagination" data-bind="foreach : ko.utils.range(1, 10)"&gt;
      &lt;li&gt;&lt;a href="#" data-bind="text : $data"&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This code will display this: </p>
  
  <pre><code>&lt;ul class="pagination"&gt;
      &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
      ...
      &lt;li&gt;&lt;a href="#"&gt;10&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>The question :</strong> How with knockout can I add static <code>&lt;li&gt;</code> at the top and the bottom of the unsorted list that will link to previous and next pages? This must be the displayed html:</p>
  
  <pre><code>&lt;ul class="pagination"&gt;
      &lt;li&gt;&lt;a href="#"&gt;previous&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
      ...
      &lt;li&gt;&lt;a href="#"&gt;10&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;next&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt; 
  </code></pre>
  
  <p>Thank you.</p>