if statement inside knockout array

3
votes

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);
})
2
if-statementfor-loopknockout.js
Do you want to load the next 25 items from the server? Or you already have all the items loaded and you only need to display 25, 50, etc. ? - david.s
i already have the items loaded. Exactly, just want to display the next 25, 50 etc - sirFunkenstine

2 Answers

2
votes

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());
})
0
votes

Since count is an observable, you must use the function syntax to return it: return count();. If you want to add 25 to the count variable each time the updateCount method is called, you will need to hardcode the value.

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