遍历用户列表并在淘汰赛中推送到数组

Question

我有一个返回所有用户列表的脚本。我想要：

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

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

剔除 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();
            }
        }
    });

我怎样才能用我已经拥有的东西来添加这些东西？提前感谢您的帮助。

Answer 1

给你。我模仿了小提琴的 getRoster ajax 调用。在您的情况下，您将进行“GET”调用而不是“POST”。

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

rosterArray是主要的observableArray，它将存储来自服务器的整个列表，filteredRoster将根据currentPage从rosterArray中获取数据，toDisplay存储限制，currentPage跟踪当前页面，计算totalRoster返回总元素在数组中

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

希望对您有所帮助。

-苏杰