Plone5 Mockup Widgets就像pat-pickadate不适用于动态生成的内容

Question

在plone 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）显示日历小部件。

这种行为是有意的吗？ 如果是这样，在Plone 5中通过AJAX调用动态获取的表单中使用模型小部件的正确方法是什么？ 是否有一些神奇的召唤通知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主题并在index.html添加<script>标记（如果您正在开发主题模块，则更喜欢这种方法）

• 将您的脚本直接声明为registry.xml的编译包，请参阅https://github.com/collective/example.p4p5/blob/master/src/example/p4p5/profiles/plone5/registry.xml （如果是这种方法，请选择此方法你正在开发一个附加模块）