像pat-pickadate这样的Plone5样机小部件不适用于动态生成的内容 [英] Plone5 Mockup Widgets like pat-pickadate not working for dynamically generated content

问题描述

在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代码.

我找不到有关此主题的任何文档或示例.有人可以把我朝着正确的方向吗?

解决方案

模式在加载时初始化，如果您的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中以编译包的形式声明脚本，请参见

  You will get two inputs. The first is a nice calendar input and the second is empty at start. After clicking the second input its class will be set to "pat-pickadate" - like the first - but no calendar is rendered.

  I came across this while trying to find the reason, why my jquery-UI overlays displaying plone add, and edit views do no longer (Plone5) show calendar widgets at all.

  Is this behavior intended? If so, what is the correct way to use mockup widgets in forms dynamically obtained by AJAX calls in Plone 5? Is there some magic call to inform the Mockup machinery of the DOM change?

  I read that Mockup has its own overlay technique, but it is hard to rewrite some 600 lines of complex JS code just to get a simple widget right.

  I was not able to find any documentation nor examples on this topic. Can anyone put me in the right direction, please?

  解决方案

  Patterns are initialized at load time, if your DOM changes and contains new elements supposed to be rendered using a pattern, you need to call Registry.scan.

  To do it, you will need to change your script like this:

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

  The script mustn't be inline, because nothing guarantees that JQuery and/or require are already loaded. So put your code in a separated JS file, and make sure it is loaded in your page using one of those 2 ways:

  • put your file in your Diazo theme and add a <script> tag in your index.html (prefer this approach if you are developing a theme module)

  • declare your script directly as a compiled bundle in registry.xml, see https://github.com/collective/example.p4p5/blob/master/src/example/p4p5/profiles/plone5/registry.xml (prefer this approach if you are developing an add-on module)

  这篇关于像pat-pickadate这样的Plone5样机小部件不适用于动态生成的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！