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类，但这看起来非常低效，可能会将页面加载时间增加几秒钟。

Answer 1

激怒了你，检查了Apostrophe！

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

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

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

中的标记

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

1 个答案: