Iterating through a list of users and pushing to an array in knockout

问题

I have this script that returns a list of all users. I would like to have:

• set the viewModel's totalUsers and page properties based on data returned.
• Iterate through the list of users and push the last user object into the observableArry
• push() method adds users to already loaded and shown users

Purpose I actually want to get a count of all users because i will be loading 20 users a page and when i reach the bottom of the page i will check if i still have more users to load and then load them. That way if i have 400 users - they won't be all loaded at once and take up time.

Knockout JS File

$.views.Roster.RosterViewModel = function (data) {
    var self = this;
    self.RosterUsers = ko.observableArray([]);
    _rosterUsers = self.RosterUsers;
    self.currentPage = ko.observable(1);
    self.toDisplay = ko.observable(20);
    self.filteredRoster = ko.computed(function(){
        var init = (self.currentPage()-1)* self.toDisplay(),
            filteredList = [],
            rosterLength = self.RosterUsers().length,
            displayLimit = self.toDisplay();
        if(rosterLength == 0)
            return[];
        for(var i = init; i<(displayLimit + init) - 1 && i<rosterLength; i++)
        {
            filteredList.push(self.RosterUsers()[i]);
        }
        return filteredList;
    }),
    totalRoster = ko.computed(function () {
        return self.RosterUsers().length;
    }),
    changePage = function (data) {
        currentPage(data);
    },
    next = function () {
        if ((self.currentPage() * self.toDisplay()) > self.RosterUsers().length)
            return;

        self.currentPage(self.currentPage() + 1);
    },
    prev = function () {
        if (self.currentPage() === 1)
            return;

        self.currentPage(self.currentPage() - 1);
    },

    $.views.Roster.RosterViewModel.AddUsers(data);
};

HTML View Page

<script  type="text/html" id ="grid">

    <section id="rosterImages" style=" float:left">
    <section id="users">
        <div id="nameImage">
            <figure id="content">
                <img width="158" height="158" alt="Gravatar" data-bind="attr:{src: GravatarUrl}"/>
                <figcaption>
                    <a title="Email" id="emailIcon" class="icon-envelope icon-white" data-bind="attr:{'href':'mailto:' + Email()}"></a>
                    <a title="Profile" id="profileIcon" class="icon-user icon-white"></a>
                </figcaption>
            </figure>
            <p data-bind="text:Name"></p>
            </div>
        </section>
    </section>
</script>

<ul>
        <li><a href="#" data-bind="click: prev">Prev</a></li>
          <!-- ko foreach: ko.utils.range(1, totalRoster()/toDisplay() + 1) -->
          <li><a href="#" data-bind="text: $data, click: $parent.changePage"></a></li>
          <!-- /ko -->
        <li><a href="#" data-bind="click: next">Next</a></li>
      </ul>

Update: Scroll Script

$(window).scroll(function () {
        if ($(window).scrollTop() == $(document).height() - $(window).height()) {
            if (parseInt($.views.Roster.RosterViewModel.currentPage(), "10") * 20 < parseInt($.views.Roster.RosterViewModel.totalRoster(), "10")) {
                $.views.Roster.RosterViewModel.next();
            }
        }
    });

How can i make these additions with what i already have? Thanks ahead for any help.

回答1:

HEre you go. I have mimicked the getRoster ajax call for the fiddle. in your case, you will be making a "GET" call and not a "POST".

http://jsfiddle.net/sujesharukil/z8vpx/4/

rosterArray is the main observableArray that will store the entire list from the server, filteredRoster will get the data from the rosterArray based on the currentPage, toDisplay stores the limit, currentPage tracks the current page, totalRoster is computed that returns the total elements in the array

var rosterArray = ko.observableArray(),
    currentPage = ko.observable(1),
    toDisplay = ko.observable(20),
    filteredRoster = ko.computed(function(){
        var init = (currentPage() - 1) * toDisplay(),
            filteredList = [],
            rosterLength = rosterArray().length,
            displayLimit = toDisplay();

        if(rosterLength === 0)
            return [];

        for(var i = init; i < (displayLimit + init) - 1 && i < rosterLength; i++){
            filteredList.push(rosterArray()[i]);
        }

        return filteredList;
    }),
    totalRoster = ko.computed(function(){
        return rosterArray().length;
    }),
    changePage = function(data){
        currentPage(data);
    },
    next = function(){
        if((currentPage() * toDisplay()) > rosterArray().length)
            return;

        currentPage(currentPage() + 1);
    },
    prev = function(){
        if(currentPage() === 1)
            return;

        currentPage(currentPage() - 1);
    };

Hope that helps.

-Suj

来源：https://stackoverflow.com/questions/15973337/iterating-through-a-list-of-users-and-pushing-to-an-array-in-knockout