Reputation: 5836
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
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
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