Skip to main content
1 de 2

1° - E possível criar um template tipo o blade do laravel usando apenas HTML/JS/CSS?

Sim, existem várias bibliotecas para isso, porém a mais famosa, utilizada, e mais completa é a Handlebars.js: http://handlebarsjs.com/

Exemplo

Template:

<script id="some-template" type="text/x-handlebars-template">
  <table>
    <thead>
      <th>Username</th>
      <th>Real Name</th>
      <th>Email</th>
    </thead>
    <tbody>
      {{#users}}
        <tr>
          <td>{{username}}</td>
          <td>{{firstName}} {{lastName}}</td>
          <td>{{email}}</td>
        </tr>
      {{/users}}
    </tbody>
  </table>
</script>

Adicionando o model e transformando o template em HTML:

var source   = $("#some-template").html();
var template = Handlebars.compile(source);
var data = { users: [
    {username: "alan", firstName: "Alan", lastName: "Johnson", email: "[email protected]" },
    {username: "allison", firstName: "Allison", lastName: "House", email: "[email protected]" },
    {username: "ryan", firstName: "Ryan", lastName: "Carson", email: "[email protected]" }
  ]};
$("#content-placeholder").html(template(data));

Porém, a verdadeira recomendação é utilizar um framework MVC JavaScript

O AngularJS resolve a arquitetura que você detalhou, mas de forma muito mais poderosa e completa.

O AngularJS tem binding de dados de duas mãos: ao alterar o model, o view ATUALIZA AUTOMAGICAMENTE. Logo, você não precisa se preocupar em passar dados para o template e nem lidar com elementos do DOM diretamente (por exemplo: adicionar um novo <li> numa lista, o Angular faz sozinho se você setar o template como tal). Veja esse exemplo de um loop como é "mágicow":

<!-- Itera no array produtos, criando um <li>Nome do Produto</li> para cada produto -->
<ul>
  <li ng-repeat="produto in produtos">{{produto.nome}}</li>
</ul>

Ao obter dados do servidor (pode ser do seu projeto PHP ou qualquer API), o HTML é atualizado automaticamente.

O Angular é do Google e é uma das bibliotecas mais quentes no momento. Aliás, no mundo do desenvolvimento web não se fala em outra coisa hoje em dia a não ser Angular (e Node, e outras relacionadas).

Um exemplo básico:

<html ng-app="app">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"/>
    <script>
      angular.module("app", [])
        .controller("HomeCtrl", function HomeCtrl($scope) {
          $scope.botao = "Texto do Botão";
        });
    </script>
  </head>
  <body ng-controller="HomeCtrl">
    <!-- O que você digitar aqui será refletido automaticamente no botão -->
    <input ng-model="botao"/>
    <button>{{botao}}</button>
  </body>
</html>