Kimpo
Kimpo

Reputation: 5836

How can i access index of foreach when iterating through ko.computed in knockout.js

i'm building a paged list on the client side with knockout.js and im trying to output the page index with the below code so i get clickable links with numbers so people can switch page.

<ul data-bind="foreach:Paging">
 <li>
<a href="#" data-bind="click: $root.SetCurrentPage(), text: WHATTOWRITEHERE "></a>
</li>
 </ul>

In my viewmodel

this.Paging = ko.computed(function () 
{
  return ko.utils.range(1, this.TotalPages);
});

Everything works, tried just outputtung text:test and it writes test for each page but i want numbers. So the easiest way is of course to access current index in the foreach and + 1.

How would i be able to do this?

Upvotes: 4

Views: 4376

Answers (2)

soniiic
soniiic

Reputation: 2685

When you use this in bindings, it will be referencing the window object. You ought to be using $data like this:

<a href="#" data-bind="click: $root.SetCurrentPage(), text: $data"></a>

I tested it using this markup and it worked as expected:

<!-- returns 12345678910 -->
<div data-bind="foreach: ko.utils.range(1,10)"><span data-bind="text: $data"></span></div>

Upvotes: 2

Mark Robinson
Mark Robinson

Reputation: 13278

The problem could be with your computed ko. You have not bound it to this. So instead of:

this.Paging = ko.computed(function ()   
{  
  return ko.utils.range(1, this.TotalPages);  
}); 

.. try ...

this.Paging = ko.computed(function ()  
{ 
  return ko.utils.range(1, this.TotalPages); 
}, this); 

You can then try ColinE suggestion of text: this

Upvotes: 2

Related Questions