作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我一直在尝试就地编辑表格组件(无需打开对话框),例如:添加新行或新列。
该组件的对话框已正确配置,因此您可以从那里选择列数和行数,但为了改进用户体验,我在表格旁边添加了一个按钮,该按钮仅在编辑模式下可见,用于添加新行以编程方式从 clientlib.edit javascript。但是不知道实际持久化数据(保存更改)的方法是什么。
任何可以让我走上正确道路的想法都将不胜感激!
最佳答案
一种可能的解决方案是基于 3 个组件 -
要实现“+”号功能和持久性,请执行以下操作 -
创建一个 cq:ClientLibraryFolder
并指定其属性 categories="cq.authoring.dialog"
,向此客户端库添加 JS as -
/* global Granite, $ */
$(document).on('cq-page-info-loaded', function() {
'use strict';
// initialisation for Mysite
window.mysite = window.mysite || {};
window.mysite.app = window.mysite.app || {};
window.mysite.app.auth = window.mysite.app.auth || {};
(function(window, ns, undefined) {
/**
* Adds a child component of a specified type to a parent editable component.
* (event handler for clicking the 'add' button in the edit interface on the sections or questions component)
*
* @param {Granite.author.Editable} parentEditable The editable parent component
* @param {string} componentName Name of the child component to add e.g. 'mysite-app/ui/components/content/link'
* @param {boolean} componentTemplate If true, call the low level interface directly. If false, call higher level Granite.author.edit methods.
*/
var createChildComponent = function(parentEditable, componentName, componentTemplate) {
return (
new ns.persistence.PostRequest()
.prepareCreateParagraph({
resourceType: componentName,
parentPath: parentEditable.path,
relativePosition: 'last',
templatePath: componentTemplate
})
.send()
).done(function() {
parentEditable.refresh();
});
};
window.mysite.app.auth.component = (function() {
return {
tablerow: {
add: function(editable) {
createChildComponent(editable, '/apps/mysite-app/ui/components/<path to row component>', false);
}
},
rowcell: {
add: function(editable) {
createChildComponent(editable, '/apps/mysite-app/ui/components/<path to column cell>', false);
}
}
};
})();
})(window, Granite.author);
});
下一步是在 editConfig
中为各个组件设置您的 actionConfigs
并将其指向上述脚本的处理程序。
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
cq:actions="[edit,delete]"
jcr:primaryType="cq:EditConfig">
<cq:actionConfigs jcr:primaryType="nt:unstructured">
<addCell
jcr:primaryType="nt:unstructured"
handler="mysite.app.auth.component.rowcell.add"
icon="coral-Icon--add"
text="Add column to table row"/>
</cq:actionConfigs>
</jcr:root>
在您的组件编辑栏上,您将开始看到“+”号,它允许您添加已配置的组件并保留其节点。
引用here如果您需要更多详细信息,可以将自定义操作添加到编辑栏。
如果您不想遵循这种方法,第一个脚本具有允许您保留组件节点的逻辑,您可以重用它并将其嵌入到您自己的实现中。
关于adobe - AEM6 - 如何在没有对话框的情况下就地编辑组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38898166/
我是一名优秀的程序员,十分优秀!