2

我一直在观看 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 的结果添加到会话视图模型中。最好的方法是什么？

4

2 回答 2

4

获取 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;
});
于 2013-04-16T09:53:35.027 回答
1

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

另一种选择是使用记录计数来启动呼叫。我模糊地记得 Breeze 的人说可能有一种方法可以使用 Breeze 获得总记录数。我会请他们插话，因为我记不太清楚了。

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

// 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 };
于 2013-04-06T12:35:13.070 回答