代码之家 › 专栏 › 技术社区 › Sam

用分页改进CodeCamper

durandal single-page-application breeze knockout.js

Sam · 技术社区 · 13 年前

我一直在看John Papa在Pluralsight上为建造SPA拍摄的精彩视频。

现在,我正在尝试为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>

会话.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,
    };

数据上下文.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中。什么是最好的方法?

2 回复 | 直到 13 年前

Eyad Saif Al-Hodiani 13 年前

要获得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;
});

John Papa 13 年前

使用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 };