骨干.js分页

Posted 2023-03-10

【中文标题】骨干.js分页

【英文标题】：backbone.js pagination

【发布时间】：2011-10-18 02:44:17

【问题描述】：

我开始使用 Backbone 并尝试将 Rails 后端的 html 模板转换为 javascript 模板。

我认为使用主干会更有利的一件事是它的模型和集合的概念。 比如说，我有 100 条记录，并且将这些记录分页到每页 10 条，通常情况下，如果没有大量的 javascript 工作，几乎不能指望 cached、ajax、 一页分页体验。意思是说，我登陆第一页，现在点击第二页，第二页请求接下来的 10 条记录 ajax'ly，如果我然后点击第一页，我将不再向服务器发出任何请求，因为它在那里.

我没有编写任何代码，但谁能告诉我如何将 ajax 请求的新到达数据附加到现有集合以进行分页？

例如，请记住 Backbone 的文档说，您第一次加载的页面应该真正包含引导数据，而不是第二次获取它们。所以

var projects_data = <%= @projects.to_json.html_safe %>;
var projects = new Cafe.Collections.ProjectsCollection();
var projects.reset(projects_data);

现在我的项目变量包含前 10 条记录，我有人检索另一轮 10 条记录，例如，我将这些新到达的 10 条记录保存在变量中

var projects_data_new = ...

我可以将它们附加到现有的“项目”集合中吗？

或者在分页的情况下，这不是 Backbone 中鼓励的设计模式吗？

【参考方案1】：

希望你现在已经解决了这个问题 :) 正如Elf Sternberg 指出的那样，神奇之处在于定义您的集合的 parse() ，下面的链接进一步解释了这一点：

first whack at pagination with backbone.js

例如如何写parse：

// 假设我们发送一个像 page: 1, per_page: 3, total: 233, 型号：...

parse: function(resp) 
    this.page = resp.page;
    this.perPage = resp.per_page;
    this.total = resp.total;
    return resp.models;
  

一旦您的收藏中包含这些详细信息，您只需相应地调整您的视图，鉴于您已经到此为止，我相信这不会那么难:)

【讨论】：

哇，这个要点快一年了！他是高级！我还没有完成从 erb 部分和模板到 Backbone+underscore 模板的整个过渡。但它不仅仅是“在雷达上”，正如我所看到的，它是必须的，因为，纯粹是因为速度和在服务器上更容易（目标是绕过 JSON 的 Rails 堆栈，因为我已经在使用 MongoDB ，默认情况下会生成 JSON）。非常感谢您在这里的跟进。确实会发布我的一些关于我如何回馈的要点的版本。

是的，我也很惊讶我昨晚使用了一岁的 Gist :D 我刚刚在 Google 上的主干.js 中搜索了分页，这是第一个出现的。它真的很有帮助，我很高兴能帮助你:)

哈，一个月后你才回来笑：）他是先进的

有人赞成这个答案，所以我重读了你的评论，我有时会这样做：P

我花了几天时间稍微改进了这个要点，并以GitHub project 的形式发布了它。还支持一些基本的页面缓存。希望这会有所帮助。

【参考方案2】：

在骨干网 0.5 及更高版本中，当您调用 fetch() 时，可以指定您希望添加而不是替换客户端上存在的数据集：fetch(add: true)。这会将新对象附加到现有的 projects 集合中。您仍然必须最终处理分页演示问题。

该集合也只会在它们通过Backbone.Collection.parse() 运行后获取要添加/获取的 JSON 对象，您可以覆盖它以执行诸如“与项目一起，给我服务器上所有对象的计数，并仅将项目返回到添加/获取。”然后，您可以使用此元数据正确显示用户可以浏览的页面数。如果你想真正聪明，你可以将集合用作稀疏数组（我的经验是这对于标准台式机或笔记本电脑上少于 10,000 个项目的集合来说很好，但不是平板电脑），并让用户翻转任意浏览页面，根据需要获取填充物。

【讨论】：

感谢 Elf，“聪明”的方法听起来很有趣（！），请问“稀疏数组”是什么意思？

稀疏数组是指并非所有对象都存在的数组；例如，如果您有“每页 10 个项目”的分页，您可能有对象 1-10、40-50 和 90-100。这意味着你的集合中的每个对象不仅需要它本身，还需要它在（抽象或服务器端）集合中的位置，而不是仅仅定位你的索引并吐出接下来的十个，你必须过滤集合，确定如果对象存在，则获取它们，如果它们不存在，并重复过滤过程以显示它们。

知道了！感谢您写下这一切。