javascript - 如何在 AJAX "paginated" View 中保持复选框选中状态？

Question

为了通过 AJAX 对项目进行分页。

我试图在 AJAX“分页” View 中保持复选框选中状态。也就是说，在一个 View 中，它显示了一个项目列表(出于性能原因 - 因为这些项目可能很多)实现了分页(每页 10 个项目)，因此输出如下:

# * `[ ]` represents a check box
# * `[X]` represents a checked check box
# * `Item<N>` represents a check box label
# * `Previous`, `Next`, `1`, `2`, `...` are WillPaginate links to switch
#    between pages

[X] Item1
[X] Item2
[X] Item3
[ ] Item4
[ ] ...
[ ] Item10

← Previous 1 2 3 Next →

通常，当用户点击 Next 链接时，它会加载并呈现(通过执行 AJAX HTTP GET 请求)下一页，包括接下来的 10 个项目。 我的问题是，如果用户检查某些项目(比如 Item1、Item2、Item3 的状态为已检查) 然后他/她切换页面，那些选中的项目状态丢失了。也就是说，当用户返回到上一页时，Item1、Item2、Item3 不再被检查(并且应该被检查因为我没有实现任何措施来保持它们的状态)。

我想在切换页面时保持检查状态。 我该怎么做？您建议使用什么方法(也许是 Ruby on Rails session...)？

Answer 1

您可以在离开时将页面的整个 DOM 树分配给一个数组项(以页码为键)。然后，当(如果)您的访问者返回该页面时，您可以直接从数组中将其加载回 DOM，而无需 AJAX 请求，保持您的复选框不变，并使页面更加快速。

只要您的复选框的 onclick 监听器位于树上比您要换出的内容更靠上的 DOM 节点上，这就可以正常工作。如果这没有意义，请查看事件冒泡——它很厉害! :)