Windows Azure Pack Management Portal Client-Side-extensiesjablonen

 

Van toepassing op: Windows Azure Pack

Hallo wereld Voorbeeldpaden voor Visual Studio Project: Microsoft.WAP.Samples.HelloWorld.TenantExtension\Templates en Microsoft.WAP.Samples.HelloWorld.AdminExtension\Templates

HTML die vereist is voor uw extensie, moet worden geplaatst in sjablonen en worden gedefinieerd in het manifest. Hiermee wordt de sjabloon in de browser geladen wanneer de Windows Azure Pack voor Windows Server-beheerportal wordt geladen.

HTML in een extensie wordt verwerkt door de jsRender templating-engine (zie http://borismoore.github.com/jsviews/demos/index.html en relevante blogberichten op http://www.borismoore.com/ ). Als u geen van de sjabloontags ({{ en }} ) gebruikt, wordt de HTML in de sjabloon standaard uitgevoerd.

Sjablonen worden weergegeven in elementen (meestal een div). Zorg ervoor dat u HTML-fragmenten hebt die geldig zijn in een element dat zich in een element bevindt. De verwerking van sjablonen vindt plaats in de context van een gegevensobject dat wordt gebruikt bij het opzoeken van waarden die in de sjabloon moeten worden vervangen. Hier volgt een voorbeeld van sjabloonmarkeringen binnen een div-element:

<div class="aux-readonlyvalue">
  {{if domain.hasExpiry == true}}
    <span>Expiration data</span>
    <div>{{>domain.ExpiryDate}}</div>
  {{/if}}
</div>

Renderingsjablonen

Sjablonen in een extensie worden aangeduid door het naamkenmerk in het sjabloonmanifest. Het contextobject kan expliciet of impliciet zijn. Als u bijvoorbeeld de tabbladen voor een extensie definieert, moet u een matrix met tabbladdefinities instellen, zoals in het volgende:

navigation = {
  tabs: [
    {
      id: "domains",
      displayName: "domains",
      template: "domainsTab",
      activated: loadDomainsTab
    }
  ]
}

Noteer de parameter Sjabloon, die overeenkomt met een naamkenmerkwaarde in het sjabloonmanifest. Het contextobject wordt impliciet ingesteld door het framework aan de clientzijde als een leeg object als het een tabblad op het hoogste niveau is, dat wil wel dat het niet wordt ingezoomd op een item, of dat het item eerder is geselecteerd als het een ingezoomd tabblad is.

Sommige functies kunnen een expliciet contextobject gebruiken om mee weer te geven. Als u bijvoorbeeld een eenvoudige wizard met één stap wilt maken:

cdm.stepWizard({
    extension: "DomainTenantExtension",
    steps: [{
      template: "createStep1",
      data: data,
      onStepCreated: function () {
        wizard = this;
      },
      onStepActivate: step1Activate,
      onNextStep: function () {
        return Shell.UI.Validation.validateContainer("#dm-create-step1");
      }
    }]
  },
  { size: "mediumplus" });

De gegevensparameter wordt gebruikt als het contextobject voor de sjabloon createStep1. Dit resulteert in jsRender die de eigenschappen van het gegevensobject bekijken bij het omzetten van variabelen.

Zie ook

Windows Azure Pack Management Portal User Interface Extensions