3

Gostaria de saber se é possível (e como fazer, se for) templates com Javascript. Assim como o Facelets no JSF, onde cria-se uma página modelo e as demais seguem o que foi pré-estabelecido.

Se alguém puder indicar algum material, agradeço bastante!

4
  • Como Assim? seguem o que foi Pré-Estabelecido? Você está falando de Orientação a àbjetos?
    – durtto
    4/12/2015 às 17:57
  • Algo como templates no AngularJS ? 4/12/2015 às 17:58
  • Desculpe, é que eu não sei muito bem como explicar isso. Tipo, em JSF tem os facelets permitem que a gente crie um template de página (com o topo e rodapé, por exemplo). E nas demais é só chamar esse template e colocar o corpo da página. Ou seja, não preciso ficar copiando o topo e rodapé em todas as páginas.
    – HDeiro
    4/12/2015 às 17:58
  • Bootstrap é em javascript, css e html5. Tem muitos componentes la 4/12/2015 às 18:17

2 Respostas 2

5

Com Handlebars você poderá criar templates em js com facilidade!

Veja um exemplo de sua syntax/Utilização:

<div class="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>

Utilizando {{template}} para realizar as suas marcações.

Populando o template.

var context = {title: "My New Post", body: "This is my first post!"};
var html    = template(context);

Resultado:

<div class="entry">
  <h1>My New Post</h1>
  <div class="body">
    This is my first post!
  </div>
</div>

Outro framework que pode realizar isto é o AngularJS, ele é muito completo possui:

  • Two-way Data binding
  • Injeção de Dependências
  • Criação de diretivas (Extensão do HTML) <- Template
  • Modularização e reuso (Controllers, Services e Filters)
5

Você pode utilizar o próprio AngularJS para modularizar a página. É possível que você separe a marcação, conteúdo e lógica de cada parte do seu web app individualmente.

Você pode ver a documentação disso em: https://docs.angularjs.org/guide/module

Também é possível utilizar soluções em específico só para template, como é o caso do mustache e outras engines de template para js. Confira o funcionamento de alguns em: http://www.creativebloq.com/web-design/templating-engines-9134396

se for simplesmente para separar o header e o footer, é possível incluir o angularjs na página e utilizar a seguinte semântica:

<div ng-include="'includes/header.html'"></div> 

<!-- Conteúdo da página -->

<div ng-include="'includes/footer.html'"></div>
0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .