Windows Azure Pack Management Portal Client-Side modelos de extensão

 

Aplica-se a: Windows Azure Pack

Hello World Sample Visual Studio Project Paths: Microsoft.WAP.samples.HelloWorld.TenantExtension\Templates e Microsoft.WAP.samples.HelloWorld.AdminExtension\Templates

HTML exigido pela sua extensão deve ser colocado em modelos e definido no manifesto. Isto irá carregar o modelo no navegador quando o Windows Azure Pack para Windows porta de gestão do Servidor carregar.

HTML numa extensão é processado pelo motor templating jsRender (ver http://borismoore.github.com/jsviews/demos/index.html e publicações de blog relevantes em http://www.borismoore.com/ ). Se não utilizar nenhuma das tags do modelo ({{ e }} ) então o HTML no modelo é saída como-is.

Os modelos são renderizados dentro de elementos contendo (geralmente um div). Certifique-se de que tem cortes HTML que sejam válidos a residir num elemento contendo. O processamento de modelos ocorre no contexto de um objeto de dados que é usado ao procurar valores para substituir no modelo. Segue-se um exemplo de marcação de modelo dentro de um elemento de div:

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

Modelos de renderização

Os modelos de uma extensão são referidos pelo atributo nome no manifesto do modelo. O objeto de contexto pode ser explícito ou implícito. Por exemplo, definir os separadores para uma extensão implica a criação de um conjunto de definições de separadores, tais como:

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

Note o parâmetro "modelo", que corresponde a um valor de atributo de nome no manifesto do modelo. O objeto de contexto será definido implicitamente pela estrutura do lado do cliente para ser um objeto vazio se for um separador de nível superior, ou seja, não é perfurado num item, ou será o item previamente selecionado se for um separador perfurado.

Algumas funções podem ter um objeto de contexto explícito para renderizar. Por exemplo, para criar um simples assistente de 1 passo:

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" });

O parâmetro de dados é usado como o objeto de contexto para o modelo "createStep1". Isto resulta em jsRender olhar para as propriedades do objeto de dados na resolução de variáveis.

Consulte também

extensões de interface de utilizador do portal de gestão de pacotes Windows Azure