在knockout中迭代用户列表并将其压入数组

我有这个脚本，它返回所有用户的列表。我想要:

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

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

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>

更新:滚动脚本

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

我怎样才能使这些添加与我已经拥有的?提前感谢任何帮助。