没有查询字符串参数的动态数据库请求

Question

所以我有一个项目卡片列表（项目是片段），我希望能够用单击的卡片中的内容填充一个叠加层。

我正在考虑让每个项目卡片都有一个 data-slug 属性，然后可以在页面 javascript 中的游标查找中使用该属性：return self.apos.docs.getManager('project').find(req, {slug: selected}) ，然后将使用 $('#overlay').innerHTML() 来更新内容，但感觉必须有更好的方法来执行此操作。在这一点上我很确定我一直在尝试使用前端代码访问后端撇号函数，这是行不通的。

我目前拥有的：

$(function () {
  var projects = document.querySelectorAll('.project');
  console.log(projects);
  $(projects).on('click', function () {
    var slug = this.id;
    var project = self.apos.docs.getManager('standard-project').find(req, { slug: slug });
  });

我定义项目的那一行只会产生各种错误。

我想另一种选择是为每个项目渲染和隐藏一个叠加层，除非它有一个 active class，但这似乎非常低效并且可能会增加几秒钟的页面加载时间.

Answer 1

很高兴您正在查看 Apostrophe！

内部团队已经通过几种方式解决了这个问题。

最简单的方法是 AJAX 将实际作品展示页面模板中的标记添加到您的叠加层中。这包括在卡片的前端留下一些线索（例如页面的 url），然后在点击处理程序中提取它，请求页面，并用收到的内容填充标记。

收到的标记将是您 apostrophe-pieces-pages 模块的 views/show.html

中的标记

没有查询字符串参数的动态数据库请求

Dynamic database requests without query string parameters

apostrophe-cms