knockout js : foreach binding adding a static element

Question

I want to do some paging for a list of observables. I use bootstrap for the styling, and in their documentation they use unsorted list to display the links for the pages.

Let's suppose we have the following code in the view:

<ul class="pagination" data-bind="foreach : ko.utils.range(1, 10)">
    <li><a href="#" data-bind="text : $data"></a></li>
</ul>

This code will display this:

<ul class="pagination">
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    ...
    <li><a href="#">10</a></li>
</ul>

The question : How with knockout can I add static <li> at the top and the bottom of the unsorted list that will link to previous and next pages? This must be the displayed html:

<ul class="pagination">
    <li><a href="#">previous</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    ...
    <li><a href="#">10</a></li>
    <li><a href="#">next</a></li>
</ul>

Thank you.

Chirag Arvadia · Accepted Answer · 2013-10-16 04:41:35Z

29

you can use below syntax..

<ul class="pagination">
    <li><a href="#">previous</a></li>
    <!-- ko foreach : ko.utils.range(1, 10) -->
    <li><a href="#" data-bind="text : $data"></a></li>
    <!-- /ko -->
    <li><a href="#">next</a></li>
</ul>

answered Oct 16, 2013 at 4:41

Chirag Arvadia

1,2007 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

knockout js : foreach binding adding a static element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related