ajax - 解释 data-apos-ajax-append 到 pieces-pages
问题描述
我想在我的项目中实现撇号 Ajax 功能,但遗憾的是我不完全了解 Ajax 功能。我上周一直在研究文档,但我没有找到有关该主题的足够信息。我想问一下是否可以在data-apos-ajax-append
外面使用apostrophe-pieces-pages
我创建了一个这样的小部件:
lib/modules/infinite-widgets/index.js
module.exports = {
extend: 'apostrophe-widgets',
label: 'Infinite Widget',
addFields: [
{
name: 'posts',
label: 'Posts',
type: 'array',
titleField: 'name',
schema: [
{
name: 'name',
type: 'string',
label: 'Name'
},
{
name: '_image',
type: 'joinByOne',
withType: 'apostrophe-image',
label: 'Image',
required: true,
filters: {
projection: {
attachment: 1,
description: 1,
title: 1
}
}
}
]
}
]
};
lib/modules/infinite-widgets/views/widget.html
<div class="row margin">
<div class="col s12 m12">
<div class="radius
{% if data.widget.shadowOn == true %}
z-depth-1
{% endif %}
">
<div data-apos-ajax-context="infinite">
{% include "indexAjax.html" %}
</div>
</div>
</div>
</div>
lib/modules/infinite-widgets/views/indexAjax.html
<div data-apos-ajax-append>
{% for name in data.widget.posts %}
{% set image = apos.images.first(name._image) %}
<div class="card z-depth-0" style="
{%- if piece.backColor-%}
background-color:{{ piece.backColor }}
{% endif %}
">
<div class="card-image">
<img src="{{ apos.attachments.url(image, { size: 'one-sixth' }) }}" />
</div>
<div class="card-content">
{{ name.name }}
</div>
</div>
{% endfor %}
</div>
这工作得很好,但不幸的是它显示了所有同时创建的帖子,我无法使用"Load More..." button with AJAX
这里
{# Load More button. Also outside data-apos-ajax-append, so it gets refreshed #}
{% if data.currentPage < data.totalPages %}
{# "Load More" button with the "append=1" flag #}
<a href="{{ data.url | build({ page: data.currentPage + 1, append: 1 }) }}">Load More...</a>
{% endif %}
那么我可以修改这个查询,有一个加载更多按钮,或者更好地data-apos-ajax-infinite-scroll
用于在小部件中创建的数组的内容,而不是一块?
解决方案
不,不可能使用data-apos-ajax-append
. 该功能专门用于撇号页面,例如,没有后端实现等待与它对话以获取小部件。
相反,您应该考虑为您的小部件编写一个浏览器端小部件播放器,它为您提供了一个将您自己的 API 调用回服务器的地方。您可以在apostrophe-twitter-widgets 模块的源代码中看到该技术。
推荐阅读
- amazon-web-services - AWS CDK:将特定 S3 资源添加到 IAM 策略
- amazon-web-services - 为每个环境单独的 HashiCorp Vault?
- python - 如何绘制不同颜色的蓝色贝塞尔曲线的每一段?
- scheduler - 为什么这么早在 M4 端口上的 threadx 调度程序上启用中断?
- firebase - 未指定访问权限时,用户可以读取集合
- gstreamer - GStreamer RTSP 客户端在 Jetson TX2 中逐渐增加内存使用量
- r - lapply 的问题,尝试使用列表中的数据框时找不到对象
- python - 如何使用 for 循环将列表中的每个值传输到 Excel 工作表中?
- git - 有没有办法在 git rebase 中自动丢弃修改过的提交?
- android - 在 MainActivity.kt (Kotlin) 中连接到 VPN