1

我学到了一些有趣的东西，我想分享一下，

请参阅下面的代码

<div id="myDiv">
    <cq:include resourceType="foundation/components/parsys" path="par"/>
</div>

我们将 parsys 组件包含在我们自己的 Div 中。所以当我们做

$('#myDiv').hide();

我们可以预期 parsys 也会被隐藏，但它不会发生。

为什么 ？我们如何隐藏这个 parsys？

4

1 回答 1

0

我们需要了解的一件事是，如果我们需要获取任何与 CQ 相关的组件。我们需要使用 CQ 提供的 WCM API。

如果我们检查 F12 我们在 parsys “par” 中的组件，就在我们的 parsys 下方，您将看到一个<script>标签。

例如，

CQ.WCM.edit({"path":"/content/mycompany/jcr:content/par/modal/modal-parsys","type":"foundation/components/parsys","csp":"pageComponent|page/par|parsys/modal|parbase/modal-parsys|parsys","isContainer":true});

查看path:"/content/mycompany/jcr:content/par/modal/modal-parsys"属性，这是内容的位置，这里也称为存储库中的可编辑。

这用作“Div ID”来定位 parsys、dialobox 或 CQ 中的任何内容。

我们使用以下代码隐藏组件。

var parsysComp = CQ.WCM.getEditable('/content/mycompany/jcr:content/par/modal/modal-parsys');
if(parsysComp) // checking if Exists
{
    parsysComp.hide();
}

有用信息： 如果您将此代码粘贴到 $(document).ready 或 $(window).ready 中，这将不起作用，因为 CQ 组件在 DOM 准备好之后加载很多并且独立于窗口。

所以说如果你想在页面加载时隐藏一个 parsys 然后把上面的代码放在

CQ.WCM.on('editablesready', function() {
    // Hiding parsys/editable code goes here
});

如果要在设计模式下隐藏 parsys 编辑栏，请转到设计模式。检查 (F12) 并在设计模式下找到路径值。它可能是

/etc/designs/default/jcr:content/pageComponent/par/modal/modal-parsys

所以要获得可编辑的代码将是

CQ.WCM.getEditable('/etc/designs/default/jcr:content/pageComponent/par/modal/modal-parsys
');

参考：

CQ WCM API 文档

参考链接 2

于 2016-07-14T15:22:46.283 回答