2

在backbone.js中预取下一页的最佳方法是什么？是否有内置机制可以做到这一点，或者我必须自己通过 Ajax 调用和存储结果来处理它。另外，有没有办法像在 JQuery 移动中那样预加载整个页面（http://jquerymobile.com/demos/1.2.0/docs/pages/page-cache.html）

4

3 回答 3

2

没有内置支持这样的东西。这取决于您的用例，但您可以做很多事情。

1) 在获取您可能很快需要的数据之前，使用 setTime() 等待一小段时间。（可能不是一个好的解决方案）

2）设置一个事件处理程序来获取特定事件的数据，或者类似的东西：

$('#my-button').on('hover',function() { 
//fetch data
});

要获取数据，您可以在主干模型或集合上使用 fetch() 函数，该函数将返回一个 jqXHR（或者您可以使用直接的 $.ajax() 调用）。然后您可以等待，看看它是失败还是通过：

 var fetch = myModel.fetch();
 fetch.done(function(data) {
   // Do something with data, maybe store it in a variable than you can later use
 })
 .fail(function(jqXHR) {
   // Handle the failed ajax call
   // Use the jqXHR to get the response text and/or response status to do something useful

 });
于 2013-08-26T23:35:53.120 回答
0

这是我如何处理将页面加载到“无限滚动”列表中的方式。

让你知道后端分页

首先，您需要一个能够处理页面加载请求的数据库后端：例如，请参阅我的 git modelloader 项目，它提供了一个集成到 Node.js/Moongoose 环境中的基于 Coffee 的小型框架。

GIT 上的模型加载器将包含其他信息和示例。

这里最重要的几点：

您的后端应支持以下分页功能

每个请求将返回部分响应，仅将其限制为例如 20 条记录（页面大小）。

默认情况下，请求返回的最后一个 JSON 记录条目将包含有关请求的附加技术和元信息，这是允许消费者实现分页所必需的。

{
    _maxRec: "3",
    _limit: "20",
    _offset: "0"
}
  • _maxRec将列出集合中的记录总数
  • _limit将列出返回的最大请求数
  • _offset将告诉您传回了哪组记录，即_offsetof200表示结果列表跳过了前 199 条记录并显示来自200-220

后端应支持以下分页控制参数：

http(s)://<yourDomainName>/<versionId</<collection>?offset=<number>

用于offset跳过许多记录，例如限制为 20 条，您将使用 then 发送第一个请求offset=0，offset=20然后offset=40以此类推，直到达到_maxRec.

为了减少数据库活动，您应该提供减少_maxRec后续请求计算的可能性：

http(s)://<yourDomainName>/<versionId</<collection>?maxRec=<number>

通过传入一个maxRec参数（通常是较早的分页请求获得的参数），请求处理程序将绕过数据库计数对象语句，从而减少一个 db 活动（性能优化）。传入的号码将通过_maxRec条目传回。通常，消费者将在第一个请求中获取该_maxRec号码并将其传回给后续请求，从而产生更快的数据访问请求。

必要时触发主干模型请求

因此，现在您必须在 Backbone 端实现必要时触发页面加载请求。

在下面的示例中，我们假设有一个Backbone.View将列表加载到jquery.tinyscrollbar基于 HTML 元素中的列表。该列表包含最初构建时通过 URL 加载的前 20 条记录：

http(s)://<yourDomainName>/<versionId</<collection>?offset=0

在这种情况下，视图将监听以下滚动事件

events:
 'mousewheel': 'checkScroll'
 'mousemove': 'checkScroll'

目标是一旦用户向下滚动到可滚动列表的底部（例如，他到达可滚动列表端点上方 30 像素的点），就会触发一个请求以加载接下来的 20 个条目。以下代码示例描述了必要的步骤：

checkScroll:  () =>
    # We calculate the actual scroll point within the list
    ttop =   $(".thumb").css("top")
    ttop = ttop.substring(0,ttop.length-2)
    theight =  $(".thumb").css("height")
    theight = theight.substring(0,theight.length-2)
    triggerPoint = 30 # 30px from the bottom
    fh =  parseFloat(ttop)+parseFloat(theight)+triggerPoint
    # The if will turn true if  the end of the scrollable list
    # is below 30 pixel, as well as no other loading request is 
    # actually ongoing
    if fh > @scrollbarheight && ! @isLoading && @endLessScrolling
        # Make sure that during fetch phase no other request intercepts
        @isLoading = true
        log.debug "BaseListView.checkscroll "+ ttop + "/"+ theight + "/"+ fh
        # So let's increase the offset by the limit
        # BTW these two variables (limit, offset) will be retrieved 
        # and updated by the render method when it's getting back 
        # the response of the request (not shown here)
        skipRec = @offset+@limit
        # Now set the model URL and trigger the fetch
        @model.url = @baseURL+"?offset="+skipRec+"&maxRec="+@maxRec
        @model.fetch 
            update: true
            remove: false
            merge: false
            add: true
            success: (collection, response, options) =>
                # Set isLoading to false, as well as 
                # the URL to the original one
                @isLoading = false
                @model.url = @baseURL
            error: (collection, xhr, options) =>
                @isLoading = false
                @model.url = @baseURL

视图的渲染方法将获取响应并更新可滚动列表，该列表的大小将增加并允许用户再次开始沿着新加载的条目向下滚动。

这将以分页方式很好地加载所有数据。

于 2013-09-08T22:01:13.923 回答
0

没有内置支持，但实际上很容易添加。请参考View Manager的概念，它能够处理“视图保持”任务和转换。

简而言之，这个概念是：视图管理器是组件，它可以从一个应用程序视图切换到另一个应用程序视图。它将dispose存在视图，因此它可以防止僵尸和内存泄漏。它还可以处理视图切换之间的转换。

于 2013-08-27T09:54:03.870 回答