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!
Stack Overflow em Português é um site de perguntas e respostas para programadores profissionais e entusiastas. Leva apenas um minuto para se inscrever.
Inscreva-se para participar desta comunidadeGostaria 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!
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:
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>