Dr.*_*sch 6 javascript ajax plone requirejs plone-5.x
在plone 5页面模板中假设以下愚蠢的代码片段:
<input id="foo" class="pat-pickadate" />
<input id="bar" />
<script type="text/javascript" >
$('#bar').click( function () {
$('#bar').addClass("pat-pickadate");
});
</script>
Run Code Online (Sandbox Code Playgroud)
你会得到两个输入.第一个是很好的日历输入,第二个是开始时为空.单击第二个输入后,其类将设置为"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'));
});
})
Run Code Online (Sandbox Code Playgroud)
该脚本不得内联,因为无法保证 JQuery 和/或 require 已加载。因此,将代码放入单独的 JS 文件中,并确保使用以下两种方式之一将其加载到页面中:
将您的文件放入 Diazo 主题中并<script>
在您的中添加一个标签index.html
(如果您正在开发主题模块,则更喜欢这种方法)
直接将您的脚本声明为已编译的包registry.xml
,请参阅 https://github.com/collective/example.p4p5/blob/master/src/example/p4p5/profiles/plone5/registry.xml(如果您正在开发,请首选这种方法附加模块)