javascript - apostrophe-images-widgets自定义小部件两次调用apos.attachments.url

我正在尝试为我的网站创建自定义apostrophe-images-widgets布局。我目前在lib/modules/apostrophe-images-widgets/views/widget.html中为html模板创建了一个项目级覆盖。我遇到的问题是，每当我选择将图像放置到自定义区域中时，都会两次调用apos.attachments.url：一次与选择的图像有关，一次与undefined附件有关。

我的自定义widget.html看起来像这样：

<a href="/"><img class="logo" src="{{ apos.attachments.url(image.attachment, { size: 'full'}) }}" /></a>

我的整个lib目录如下所示：



我的app.js是使用默认配置设置的。

我的自定义layout.html像这样引用图像：

{{
    apos.area(data.page, 'web-logo', {
        widgets: {
            'apostrophe-images': {
                size: 'full'
            }
        }
    })
}}

除了在apostrophe-attachments/lib/api.js中抛出异常之外，我不确定我还能给您提供什么其他信息：

self.url = function(attachment, options) {
  options = options || {};

  // THROWS ERROR AT `attachment._id`
  var path = '/attachments/' + attachment._id + '-' + attachment.name;
  if (!options.uploadfsPath) {
    path = self.uploadfs.getUrl() + path;
  }
// other code
}

我不太确定在哪里可以找到解决方案...我能提供的其他任何信息，请告诉我。

我没有覆盖index.js或apostrophe-images-widgets的apostrophe-images

我得到的确切错误很长，但这是stacktrace的开始

TypeError: Cannot read property '_id' of undefined

不是很有帮助，但是仅此而已。

感谢您的阅读和提供的任何帮助！

最佳答案

我是P'unk Avenue的Apostrophe的首席建筑师。

如果查看widgetBase.html模块中的apostrophe-images-widgets，您会发现image没有直接传递到模板。相反，Apostrophe始终将数据作为data对象的属性传递到模板。对于窗口小部件，与窗口小部件关联的数据作为data.widget传递。

图像小部件尤其扩展了部件小部件，该部件可能会显示多个项目。因此，其架构中存在一个联接，您可以在数组属性data.widget._pieces中找到实际的片段（图像）。

最后的皱纹：有时这些连接具有自己的“关系属性”，在这种情况下，裁剪坐标（如果有）与实际图像分开。因此，数组中的每个条目实际上都是具有item属性（图像）和其他与农作物有关的其他属性的对象。因此，需要额外的一行代码来从数组中的每个条目中获取实际项。

这是您的代码的有效版本：

{%- for entry in data.widget._pieces -%}
  {# Works whether there's a relationship in the join or not. Normally there always #}
  {# is for slideshows, but just in case someone really hates cropping... -Tom #}
  {%- set image = entry.item or entry -%}
  <a href="/"><img class="logo" src="{{ apos.attachments.url(image.attachment, { size: 'full'}) }}" /></a>
{%- endfor -%}

希望这会有所帮助！

附言还有一件事：不要在您的区域名称中使用连字符。您会注意到Apostrophe正在显示警告。如果愿意，可以使用CamelCase。

关于javascript - apostrophe-images-widgets自定义小部件两次调用apos.attachments.url，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41994270/