Question

我一直在观看John Papa关于Pluralsight制作SPA的精彩视频。

现在，我正在尝试为Sessions页面实现分页，我不确定我所做的是否是正确的方法。如果有人尝试过类似的东西，我会感激一些反馈。

这就是我所做的。

sessions.html

  <section>
    <footer>
        <ul class="pager">
            <li>
                <button class="btn btn-info btn-small" data-bind="click: previous, enable:canPrev"><i class="icon-angle-left"></i>Previous</button>
            </li>
            <li>
                <button class="btn btn-info btn-small" data-bind="click: next, enable: canPrev">Next<i class="icon-angle-right"></i></button>

            </li>
        </ul>
    </footer>
</section>

sessions.js

   var  currentPage = ko.observable(), 

   activate = function () {
        currentPage(0);
        return datacontext.getSessionPartials(sessions);
   },

   previous = function () {
        currentPage(currentPage() - 1);
        return datacontext.getSessionPartials(sessions, true, currentPage());
    },

    canPrev = ko.computed(function () {
        return currentPage() > 0;
    }),

    canNext = ko.computed(function () {
        //return currentPage > 0;
    }),

    next = function () {
        currentPage(currentPage() +1);
        return datacontext.getSessionPartials(sessions, true, currentPage());
    },

   var vm = {
        //existing stuff plus the following:
        previous: previous,
        next: next,
        currentPage: currentPage,
        canPrev: canPrev,
        canNext: canNext,
    };

datacontext.js

 var query = EntityQuery.from('Sessions')
            .select('id, title, code, speakerId, trackId, timeSlotId, roomId, level, tags')
            .skip(currentPage * 5).take(5)                
            .orderBy('timeSlotId, level, speaker.firstName')
            .inlineCount(true);

除了canNext之外，这是有效的，因为我不知道如何将inlineCount的结果添加到会话viewModel。什么是最好的方式？

Answer 1

获取inlineCount在datacontext.js

中添加此行

   var getSessionPartials = function (sessionsObservable, totalpages,totalrecords, currentPage) {

        var query = EnityQuery.from('Sessions')
               .select('id, title, code, speakerId, trackId, timeSlotId, roomId, level, tags')
               .skip(currentPage * 5).take(5)
               .where("title","startsWith","A")
               .orderBy('timeSlotId, level, speaker.firstName')
               .inlineCount(true);


        return manager.executeQuery(query)
                .then(querySucceeded)
                .fail(queryFailed);

        function querySucceeded(data) {
            var list = partialMapper.mapDtosToEntities(
               manager, data.results, entityNames.session, 'id'
               );

            if (sessionsObservable) {
                sessionsObservable(list);
                totalpages(Math.ceil(data.inlineCount / 10));
                totalrecords(data.inlineCount);
            }

            log('Retireved Sessions from remote datasource', data, true);
        }
    };

在session.js中

添加

var currentPage = ko.observable();
var totalPages = ko.observable();
var totalrecords = ko.observable();


canNext = ko.computed(function () {
    return currentPage() < totalPages();
    //return true;
});

Answer 2

使用Breeze，您可以获得任意数量的行，因为Breeze在其实体管理器中为您缓存它们。然后只在页面上显示您想要的那些。所以对于页面大小为20，如果你愿意，可以抓40，然后显示20。那样你已经有了接下来的20个并且知道是否还有另一个页面。您可以通过这种方式模拟虚拟分页。好吧，它不优雅，但它有效：）

另一种选择是使用记录计数来准备呼叫。我从Breeze的人们那里模糊地回忆起一些事情，说可能有办法用Breeze获得总记录数。我会要求他们插话，因为我不记得具体。

如果您使用相同的调用来获取数据，那么您可以将值设置为datacontext中的实体。或者，您可以从方法返回包含会话和计数的包装器对象。像这样......

// inside the datacontext method's querySucceeded
// data is your session data you got back
// rowCount is the number of total rows.

return { sessions: data, rowCount: rowCount };

使用分页改进CodeCamper

2 个答案: