if statement inside knockout array

Question

Im trying to load a knockout observable array 25 items at a time using a count variable. The idea is that when you click a button you get another 25 items in the list. Sounds simple but Im useless with knockout.

I tried calling $root.getCount and $parent.getCount and put getCount in my list-view div as a value but none work. I might be over thinking it. All i want to do is put a named variable into the if statement where $getCount is. help would be awesome.

<div class="list-view" >
    <ul data-bind="foreach: myBigList" class="shop_list">
        <!-- ko if: $index() < $getCount -->
            <li class="list_row">

            </li>
        <!-- /ko -->
    </ul>
</div>

here's my view model

 $(function () {
    var viewModel = {
        count: ko.observable(25),
        getCount: function () {
            return count;
        },
        updateCount: function () {
            count+=count;
        },
    };
    ko.applyBindings(viewModel);
})

Answer 1

I'm not sure I understand what you are really trying to achieve, but I'm going to assume you already have a big list of items that you want to display in groups of 25. You can achieve that using the visible binding:

<div class="list-view" >
    <ul data-bind="foreach: myBigList" class="shop_list">
        <li class="list_row" data-bind="visible: $index() < $parent.count()">

        </li>
    </ul>
</div>

Since count is an observable, to upate it's value you need to do this:

$(function () {
    function ViewModel() {
        this.count = ko.observable(25);
        this.updateCount = function () {
            var newCount = this.count() + 25;
            this.count(newCount);
        };
    }
    ko.applyBindings(new ViewModel());
})