我在 Adobe CQ 5.6 中有一个页面,该页面上有三个单独的 parsys 实例,每个实例都向其中添加了一个组件,该组件通过 Ajax 调用添加了一段 HTML。我的最终目标是设置一个仍然可供作者编辑访问的 AngularJS 子页面导航。
我遇到的问题是这些 Ajax 部分正在从 CQ 中提取页面,这些页面本身包含 parsys 实例。但是,这些通过 Ajax 添加的实例并未在创作环境中初始化,即使它们为 parsys 部分正确添加了 HTML 标记。我还验证了 Ajax 部分正在使用 jcr:content 子节点创建新的内容节点(在 /content 下)。
在我看来,我需要做的是在每次 Ajax 调用后调用一些 javascript 命令来重新初始化 sidekick,这会换出页面上的 parsys 部分。我只是不知道我会调用什么 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>