apostrophe-cms - 将后端数据注入(inject) View 以在客户端 JS 中使用

Question

我想将文档列表返回到将在某些客户端 JS 中使用的数组。在我的 apsotrophe-pages 模块中，我有这个 apos.docs.find 调用，它正在工作并返回我需要获取的文档。现在我有了这个文档数组，我需要将数据公开给客户端 JS。

通读文档，看起来可能建议使用 pieces 来执行此操作，但看起来这些 pieces 需要放入小部件中，然后再将小部件放入页面中。

我理解模块分离的最佳实践，但我只是希望尽可能简单轻松地获取这些数据以供客户端使用(有点时间紧迫)。

有没有一种简单易行的方法可以让我将这个 autoCompleteData 数组暴露给前端，这样我就可以在我的客户端代码中做类似下面的事情？

(感谢您的帮助!过去几天我遇到了几个撇号问题，但我认为这是帮助我填补将后端对象连接到前端的空白的最后一部分。)

\lib\modules\apostrophe-pages\views\pages\home.html

 <script>
   var page = apos.page;
   $('#displayDocs').text(page.autoCompleteData);
 </script>

\lib\modules\apostrophe-pages\index.js

 module.exports = {
  types: [
     { name: 'default', label: 'Default Page' },
     { name: 'apostrophe-blog-page', label: 'Blog Index' },
  ],
  autoCompleteData: [],
  construct: function(self, options) {

    self.pageBeforeSend = function(req, callback) {

       let criteria = [
         {"type": "apostrophe-blog"}, 
         {"published": true}
       ];
       criteria = { $and: criteria };

       self.apos.docs.find(req, criteria).sort({ title: 1 }).toObject(function(err, collection){     
       self.autoCompleteData = collection;
    });

    return callback(null);
  }
 }
}

Answer 1

如您所知，我在 P'unk Avenue 领导 Apostrophe 团队。

您非常接近解决您的问题。您只需将返回的数据附加到 req.data，以便它在 Nunjucks 模板中作为 data 对象的一部分可见。

但是您还需要更加小心异步编程。现在你正在发出一个异步请求去获取一些文档；与此同时，您正在立即调用您的回调。这是不对的 — 回调的意义在于，在您实际拥有数据并准备好在模板中呈现数据之前，您不会调用它。

这里是对相关代码的更正:

self.apos.docs.find(req, criteria).sort(
  { title: 1 }
).toArray(function(err, autocomplete) {
  if (err) {
    return callback(err);
  }
  req.data.autocomplete = autocomplete;   
  return callback(null);
});  

我所做的更改:

• 我调用toArray，而不是toObject。您对此处不止一件元素感兴趣。
• 我在继续之前检查错误。如果有，我将其传递给回调并返回。
• 我将该数组分配给 req.data.autocomplete，以便我的 nunjucks 页面模板和它们扩展的布局可以看到它。
• 之后我用 null 调用回调以指示成功，然后返回。

请注意，在调用回调时我总是使用 return 关键字。永远回归 (ABR)。否则，您的代码将继续以您意想不到的方式执行。

这段代码会有一些性能问题，因为如果片段有区域和连接等等，它会获取很多信息。您应该考虑添加投影:

self.apos.docs.find(req, criteria, { title: 1, slug: 1 })...

将您为此目的关心的任何其他属性添加到投影中的属性。 (这是一个标准的 MongoDB 投影，所以如果您想了解更多信息，请阅读这些内容。)

使用“ super 模式”保留原来的pageBeforeSend方法

apostrophe-pages 模块已经有一个 pageBeforeSend 方法，它做了重要的工作。如果您只是覆盖它，您将失去这项工作的好处。

一个解决方案是在您的项目中创建一个新模块，一个根本不扩展另一个模块，并在其中引入一个pageBeforeSend 方法。由于 pageBeforeSend 是由 Apostrophe 的 callAll 机制调用的，因此它会为每个具有一个的模块调用。

另一种解决方案是遵循“ super 模式”以确保方法的原始版本也被调用:

var superPageBeforeSend = self.pageBeforeSend;
self.pageBeforeSend = function(req, callback) {
  // Do our things here, then...
  return superPageBeforeSend(req, callback);
};

将数据传递给浏览器中的javascript

回答你的下一个问题(:

在您的页面模板中，您现在可以编写:

<script>
  var autocomplete = {{ data.autocomplete | json }};
</script>

json nunjucks 过滤器将数组转换为 JSON，保证可以安全地输出到这样的脚本标记中。因此，您在浏览器端 JavaScript 中得到了一个漂亮的数组。

对适当的内容类型使用find方法

您可以避免为了获得正确类型的内容和检查已发布的内容等而创建自己的条件对象的麻烦。而是考虑编写:

self.apos.modules['apostrophe-blog'].find(req, {}).sort()...

每个 pieces 模块都有自己的 find 方法，该方法返回为该类型定制的游标，因此它将更好地坚持已达到发布日期的内容和其他您可能没有的内容正在考虑。

希望对您有所帮助!