Question

我在Adobe CQ 5.6中有一个页面，它在页面上有三个独立的parsys实例，每个实例都添加了一个组件，该组件通过Ajax调用添加了一段HTML。我的最终目标是设置一个AngularJS子页面导航，仍可供作者编辑。

我遇到问题的地方是这些Ajax部分从CQ中提取页面，这些页面本身包含了parsys实例。但是，通过Ajax添加的这些实例未在创作环境中初始化，即使它们正在为parsys部分正确添加HTML标记。我还验证了Ajax部分正在使用jcr：content子节点创建新的内容节点（在/ content下）。

在我看来，我需要做的就是调用一些javascript命令，在每次调用页面上的parsys部分的Ajax调用之后重新初始化sidekick。我只是不知道我会调用什么javascript函数。

有谁知道这个功能是什么，还是我完全偏离基地？

这是我的mainmoduel.jap和shoes.jsp文件中的代码。最后的angular.bootstrap是处理页面上的多个兄弟模块所必需的。如果我不使用Ajax，所有这些都有效。

<%-- angularmainpage-simple.jsp --%>
<%@include file="/libs/foundation/global.jsp"%><%
%><%@page session="false" %><%
%><%
    // TODO add you code here
%><cq:include script="head.jsp" />
<cq:includeClientLib categories="angulardemo.all"/>

<div data-ng-app class="page-content bodyWidth" id="mainPageContainer">
    body
    <div class="row-fluid"><%-- row-fluid here will enlarge the width to 100% --%>
        <div class="span12">
            <cq:include path="grid-12-par" resourceType="foundation/components/parsys" />
        </div>
    </div>
    <div class="row-fluid">
        <div class="span8">
            <cq:include path="grid-8-par" resourceType="foundation/components/parsys" />
        </div>
        <div class="span4">
            <cq:include path="grid-4-par" resourceType="foundation/components/parsys" />
        </div>
    </div>
</div>

和

<%-- shoes.jsp --%>
<%@include file="/libs/foundation/global.jsp"%>
    <div id="shoesComponent" class="angularComponent">
    <div data-ng-controller="shoesController">
        <h4>Name: {{name}}</h4>
        <div data-ng-view>
        </div>
        <h5>Sub-Parsys:</h5>
        <div>
            <cq:include path="shoes-par" resourceType="foundation/components/parsys" />
        </div>
        <ul class="nav nav-list" navlist>
            <li class="nav-header">{{name}} pages:</li>
            <li class="active" ng-click="setActive($event)">
                <a href="#/route1">Route 1</a>
            </li>
            <li ng-click="setActive($event)">
                <a href="#/route2">Route 2</a>
            </li>
        </ul>
    </div>
</div>

<script type="text/javascript">
function shoesController ($scope) {
$scope.name = "Shoes Module";
}
var shoesModule = angular.module('shoesMod', []).
config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/route1', {templateUrl: 'home/shoes/route1.html', controller: shoesController}).
        when('/route2', {templateUrl: 'home/shoes/route2.html', controller: shoesController}).
        otherwise({redirectTo: '/route1'});
}]);

angular.bootstrap(document.getElementById('shoesComponent'), ['shoesMod']);
</script>

路线很简单：

<%-- partial.jsp --%>
<%@include file="/libs/foundation/global.jsp"%><%
%><%@page session="false" %><%
%><%
    // TODO add you code here
%><div>Partial Parsys for CQ Resource "<%=currentPage.getTitle() %>"</div>
<div>Need to call some script here to initialize the parsys component below.</div>
<div><cq:include path="partial-par" resourceType="foundation/components/parsys" /></div>

Answer 1

由于REST接口，创作更改归结为POST语句。

您可以在通过内置GUI创作进行编辑时观看网络流量（即Chrome Dev Tools网络标签），对报表进行反向工程。

例如：

的http：// {实例：端口} /内容/ geometrixx / EN /产品/ JCR：内容/帕/ 7_1204885810609
表格数据:(网址编码）

.%2Fsling%3AresourceType:foundation%2Fcomponents%2Ftext
.%2Fjcr%3AlastModified:
.%2Fjcr%3AlastModifiedBy:
_charset_:utf-8
%3Astatus:browser
.%2Ftext:%3Cp%3EThe%20triangle%20is%20an%20old%20favorite.%20It%20combines%20the%20simplicity%20of%20three-sidedness%20with%20the%20reliability%20of%20having%20only%20two%20dimensions.%20And%20with%20the%20new%20finds%20off%20the%20coast%20of%20Madagascar%20coming%20online%2C%20triangle%20prices%20are%20lower%20than%20ever!%26nbsp%3B%3C%2Fp%3E%0A%3Cp%3EIf%20you%20like%20the%20look%20of%20the%20triangle%20but%20want%20to%20upgrade%20to%20three%20dimensions%2C%20why%20not%20take%20a%20look%20at%20the%20tetrahedron%3F%3C%2Fp%3E%0A%3Cp%3EChanged%3C%2Fp%3E%0A
.%2FtextIsRich:true
.%2Fcq%3AcssClass:%20
oldCqCssClass:%20

另请参阅：http://sling.apache.org/documentation/bundles/manipulating-content-the-slingpostservlet-servlets-post.html

如何使用Ajax将解析添加到Adobe CQ页面？

1 个答案: