遍历用户列表并推入淘汰赛中的数组 [英] 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:

• 根据返回的数据设置viewModel的totalUsers和页面属性.
• 遍历用户列表，并将最后一个用户对象推入observableArry
• push()方法将用户添加到已加载并显示的用户

目的 我实际上想统计所有用户，因为我将在一个页面上加载20个用户，当我到达页面底部时，我将检查是否还有更多用户要加载，然后再加载它们.这样，如果我有400个用户-他们不会一次全部加载并占用时间.

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.

敲除JS文件

$.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查看页面

<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>

更新:滚动脚本

$(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.

推荐答案

在这里.我模仿了getRoster ajax的提琴要求.在您的情况下，您将拨打"GET"电话，而不是"POST".

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是主要的observableArray，它将存储来自服务器的整个列表，filteredRoster将基于currentPage从rosterArray获取数据，toDisplay存储限制，currentPage跟踪当前页面，totalRoster计算得出返回的总元素在数组中

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);
    };

希望有帮助.

-Suj

这篇关于遍历用户列表并推入淘汰赛中的数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！