javascript - 像 pat-pickadate 这样的 Plone5 Mockup 小部件不适用于动态生成的内容

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 添加和编辑 View 根本不再(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 主题并添加一个 <script>在你的 index.html 中标记(如果您正在开发主题模块，更喜欢这种方法)

• 在 registry.xml 中将您的脚本直接声明为已编译的包, 请参阅 https://github.com/collective/example.p4p5/blob/master/src/example/p4p5/profiles/plone5/registry.xml (如果您正在开发附加模块，则更喜欢这种方法)