How to make an embedded template a fixed number of times

Question

I have a search results screen and in the given payload of results I return the page number. At the same time, I intend to create a simple pager.

So I really need to do this:

<!-- ko for(var i = 0; i < pageCount(); i++) --> <div data-bind="html: 'Page '+$index()"></div> <!-- /ko --> 

Obviously this does not work, but you understand what I mean. I believe that I could create another observable array of integers in the Model View with each element representing the page, but that seems redundant. However, this may be my only option ?!

Well, I thought it’s better to ask, because sometimes there is some kind of killer function that creates a range on the fly, and then I can foresee this bad boy.

Anyhooo, I think you understand what I mean. thanks

Answer 1

I would use foreach: new Array(pageCount()) :

 <!-- ko foreach: new Array(pageCount()) --> <div data-bind="html: 'Page '+$index()"></div> <!-- /ko -->​ 

Answer 2

If I understand your requirements correctly, take a look at the Michael Best 'Repeat' plugin:

https://github.com/mbest/knockout-repeat

Example:

 <div data-bind="repeat: pageCount" data-repeat-bind="html: 'Page '+$index"></div>