Виджеты-макеты Plone5, такие как pat-pickadate, не работают для динамически генерируемого контента

Question

Предположим следующий глупый фрагмент кода в шаблоне с 5 страницами.

<input id="foo" class="pat-pickadate" />

<input id="bar" />

<script type="text/javascript" >
       $('#bar').click( function () {
            $('#bar').addClass("pat-pickadate");
       });
</script>

Вы получите два входа. Первый - хороший ввод календаря, а второй при запуске пуст. После нажатия на второй вход его класс будет установлен на "pat-pickadate" - как и первый - но календарь не отображается.

Я столкнулся с этим, пытаясь выяснить причину, по которой мои наложения jquery-UI, отображающие добавление plone и представления редактирования, больше не отображают (Plone5) виджеты календаря.

Это поведение предназначено? Если да, то как правильно использовать виджеты макетов в формах, динамически получаемых вызовами AJAX в Plone 5? Есть ли какой-то волшебный призыв сообщить механизму Mockup об изменении DOM?

Я читал, что у Mockup есть своя собственная методика наложения, но сложно переписать около 600 строк сложного кода JS просто для того, чтобы получить правильный виджет.

Я не смог найти ни документации, ни примеров по этой теме. Кто-нибудь может направить меня в правильном направлении, пожалуйста?

Answer 1

Шаблоны инициализируются во время загрузки, если ваш DOM изменяется и содержит новые элементы, которые должны отображаться с использованием шаблона, вам нужно вызвать Registry.scan,

Для этого вам нужно будет изменить ваш скрипт следующим образом:

require([
    'jquery',
    'pat-registry'
], function($, Registry) {
    $('#bar').click( function () {
        $('#bar').addClass("pat-pickadate");
        Registry.scan($('#bar'));
    });
})

Скрипт не должен быть встроенным, потому что ничто не гарантирует, что JQuery и / или require уже загружены. Поэтому поместите ваш код в отдельный файл JS и убедитесь, что он загружен на вашу страницу одним из следующих двух способов:

• поместите свой файл в тему Diazo и добавьте <script> тег в вашем index.html (предпочитайте этот подход, если вы разрабатываете модуль темы)

• объявите ваш скрипт напрямую как скомпилированный пакет в registry.xmlсм. https://github.com/collective/example.p4p5/blob/master/src/example/p4p5/profiles/plone5/registry.xml (предпочитайте этот подход, если вы разрабатываете дополнительный модуль)