Windows Modelos de Extensão Client-Side do Portal de Gerenciamento de Pacotes do Azure

 

Aplica-se a: Windows Azure Pack

Olá, Mundo caminhos de Visual Studio Project de exemplo: Microsoft.WAP.Samples.HelloWorld.TenantExtension\Templates e Microsoft.WAP.Samples.HelloWorld.AdminExtension\Templates

HTML exigido por sua extensão deve ser colocado em modelos e definido no manifesto. Isso carregará o modelo no navegador quando o Windows Azure Pack for Windows portal de gerenciamento do servidor for carregado.

HTML em uma extensão é processado pelo mecanismo de modelagem jsRender (consulte http://borismoore.github.com/jsviews/demos/index.html e postagens relevantes no blog).http://www.borismoore.com/ Se você não usar nenhuma das marcas de modelo ({{ e }} ) , o HTML no modelo será a saída como está.

Os modelos são renderizados dentro de elementos que contêm (geralmente um div). Certifique-se de ter snippets HTML válidos que residem em um elemento que contém. O processamento de modelos ocorre dentro do contexto de um objeto de dados que é usado ao procurar valores para substituir no modelo. Veja a seguir um exemplo de marcação de modelo dentro de um elemento div:

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

Renderizando modelos

Modelos em uma extensão são referenciados pelo atributo de nome no manifesto do modelo. O objeto de contexto pode ser explícito ou implícito. Por exemplo, definir as guias de uma extensão envolve a configuração de uma matriz de definições de guia, como no seguinte:

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

Observe o parâmetro "template", 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 uma guia de nível superior, ou seja, ele não é detalhado em um item ou será o item selecionado anteriormente se for uma guia detalhada.

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

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". Isso resulta em jsRender examinando as propriedades do objeto de dados ao resolver variáveis.

Consulte Também

Windows Extensões de Interface do Usuário do Portal de Gerenciamento do Azure Pack