knockout.js - 通过分页改进 CodeCamper

Question

我一直在 Pluralsight 上观看 John Papa 关于构建 SPA 的精彩视频。

现在，我正在尝试为 session 页面实现分页，但我不确定我所做的是否是正确的方法。如果有人尝试过类似的事情，我将不胜感激。

这就是我所做的。

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 的结果添加到 session 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;
});