Объяснение о data-apos- ajax -apppend внешних частей-страниц - PullRequest
Новая
       24

Объяснение о data-apos- ajax -apppend внешних частей-страниц

0 голосов
/ 03 февраля 2020

Я хочу реализовать функции апострофы Ajax в своем проекте, но, к сожалению, я не совсем понимаю функции Ajax. Я изучал документацию за последнюю неделю, но не нашел достаточно информации об этом топи c. Я хотел бы спросить, можно ли использовать 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>

Это работает довольно хорошо но, к сожалению, он отображает все сообщения, созданные simultansiosly, и я не могу использовать "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 для содержимого массива, созданного в виджете вместо куска?

1 Ответ

0 голосов
/ 06 февраля 2020

Нет, это невозможно сделать с помощью data-apos-ajax-append. Эта функция предназначена специально для страниц-апострофов, и нет никакой серверной реализации, ожидающей, например, чтобы поговорить с ней о виджетах.

Вместо этого вам следует взглянуть на написание проигрывателя виджетов на стороне браузера для вашего виджета, который дает вам место для собственных API-вызовов на сервер. Вы можете увидеть эту технику в источнике модуля apostrophe-twitter-widgets .

...