Skript-Tag bricht sehnlich Daten-Sly-Tag im Autor-Modus

Question

Ich benutze Winkel mit sightly. Also habe ich eckige HTML-Vorlage von Skript-Tag umgeben, die auch sightly Attribute wie Data-sly-Ressource hat. Im folgenden Beispielcode erhalten Sie eine klare Vorstellung.

Es funktioniert gut im Nicht-Bearbeitungsmodus, aber im Bearbeitungsmodus kann ich nicht Data-sly-Ressource-Teil erstellen. Es sieht aus wie <script> Tag lässt es nicht roperly arbeiten, weil, wenn ich <script> entfernen Tag, als ich es erstellen kann.

Und Entfernen von Skript-Tag ist auch keine Option.

Also, wie kann ich Script-Tag-Formular stoppen sightly Funktionalität im Bearbeitungsmodus zu stoppen?

Answer 1

Ich endete mit der Wiederholung des Codes, einen für den Autor-Modus und andere für den Nicht-Bearbeitungs-Modus.

Unten ist die Ähnlichkeit meiner Lösung sehr ähnlich.

<section data-sly-resource="${ @path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage" data-sly-test="${wcmmode.edit}" > 
     <div ng-include="'private/textOverImage.html'"></div> 
    </section> 

    <script type="text/ng-template" id="example.html" data-sly-test="${!wcmmode.edit}"> 
     <section data-sly-resource="${ @path='textOverImage', resourceType='example/components/textOverImage'}" id="textOverImage" > 
     <div ng-include="'private/textOverImage.html'"></div> 
     </section> 
    </script> 

Wie Sie im obigen Code sehen können, was zeigen, und wenn Werke über data-sly-test="${wcmmode.edit}".

Ich habe auch versucht sightly Vorlage für redundanten Code zu erstellen und als data-sly-use versuchen, aber jetzt funktioniert es im Autorenmodus aber sightly nicht Vorlage innerhalb <script> Tag legen kann, obwohl ich @ context='unsafe'

Answer 2

In Ihrem Skript-Tag können Sie data-sly-unwrap="${wcmmode.edit}" hinzufügen

Dies wird script-Tag im Bearbeitungsmodus entfernen so dass Sie enthielten Komponenten bearbeiten, aber gerendert in einem anderen Modus wird der Script-Tag.

Answer 3

verwendet fand ich die folgende erwähnen in Netcentric der AEM Sightly Style Guide:

Dann, weil die HTML-Grammatik-Elemente innerhalb eines < script> oder < style> Elemente angeordnet ignoriert, kann kein Block-Anweisung innerhalb verwendet werden, die m.

Obwohl es nicht explizit in der Sightly spec angegeben ist, macht es Sinn. Also ist deine Lösung richtig.

Answer 4

Es gibt eine Problemumgehung auf dem Sightly Reference

basierend

1. Setzen Sie das Markup in einer separaten HTML-Datei sagen mymarkup.html parallel zu mycomponent.html
2. In Component HTML-Datei (zB mycomponent.html) <script type="text/ng-template" data-sly-include="mymarkup.html"></script>

verwenden In mymarkup.html können wir Sightly-Tags normal verwenden und diese würden normalerweise ausgewertet/ausgeführt werden, wir müssten nicht einmal die @ context f angeben oder Variablen, die wir mithilfe der API lesen würden. Die endgültige Markup Komponente gerendert mycomponent.html wenn gezogen Seite würde unter

so etwas wie dieses machen

<script type="text/ng-template"> 
    //mymarkup.html evaluated content here 
</script>