Plone5 样机小部件(如 pat-pickadate）不适用于动态生成的内容

Plone5 Mockup Widgets like pat-pickadate not working for dynamically generated content

本文关键字：动态 适用于 不适用 小部 样机 pat-pickadate Plone5      更新时间：2023-09-26

假设 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 调用动态获取的表单中使用模型小部件的正确方法是什么？是否有一些神奇的调用来通知模型机制DOM更改？

我读到Mockup有自己的覆盖技术，但是很难重写大约600行复杂的JS代码，只是为了获得一个简单的小部件。

我找不到有关此主题的任何文档或示例。请问谁能把我引向正确的方向？

模式在加载时初始化，如果你的 DOM 发生变化并且包含应该使用模式渲染的新元素，你需要调用 Registry.scan 。

为此，您需要像这样更改脚本：

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

脚本不能是内联的，因为没有什么能保证 JQuery 和/或 require 已经加载。因此，请将您的代码放在一个单独的 JS 文件中，并确保使用以下 2 种方式之一将其加载到您的页面中：

  • 将您的文件放在您的 Diazo 主题中，并在您的index.html中添加一个 <script> 标签（如果您正在开发主题模块，则更喜欢这种方法）

  • 在 registry.xml 中将脚本直接声明为已编译的捆绑包，请参阅 https://github.com/collective/example.p4p5/blob/master/src/example/p4p5/profiles/plone5/registry.xml（如果您正在开发附加模块，则首选此方法）

相关文章：