1

Eu preciso de ajuda para mudar a minha index de html para EJS.

Eu estou usando Node, e eu já fiz as mudanças no meu arquivo de configuração para o EJS funcionar corretamente.

No meu index.ejs eu tenho uma tabela tr:

<div class="container">
<div class="starter-template">
    <table class="table">
        <thead>
            <tr>
               <th>✓</th>
               <th>ID</th>
               <th>Name</th>
               <th>Email</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>
</div>

E esse é a tag de script antes do final do corpo:

$.ajax({ type: 'GET', url: 'https://myapp.com/reservations', crossDomain: true, success:function(reservations){

reservas.forEach (function (data) {
    var reservation = [];


    reservation.push('<tr class="reservas">');
    reservation.push('<td> <input type="checkbox" name="checkbox"/></td>');
    reservation.push('<td>' + data._id + '</td>');
    reservation.push('<td>' + data.nome + '</td>');
    reservation.push('<td>' + data.email + '</td>');
    reservation.push('</tr>');

    $('tbody').append(reservation.join(""));

});

},

error:function(e){
    console.log(e);
}
});

Está funcionando corretamente, mas agora eu quero misturar o js com o html.

No meu arquivo de configuração eu tenho isso:

app.get('/', function(req, res) { res.render('index', { title: 'DATA BASE' }); });

Se alguém puder me ajudar, ou pelo menos me dar uma direção, porque eu não tenho ideia de como usar o EJS.

Obrigado.

1 Resposta 1

0

Marcelo, o EJS é como o ERB do Ruby, usando ele no node, você usa ele para adicionar dados dinâmicos a suas views/templates, ele permite você rodar loops e afins e o resultado vira o arquivo que será servido para o cliente (seja navegador ou API).

Pelo que vi você deve estar usando algum framework web como o express e roteando o path "/" para renderizar a template "index.ejs".

Neste caso antes de dar render você poderia fazer o seguinte no Node.js

Trocar o:

app.get('/', function(req, res) { res.render('index', { title: 'DATA BASE' }); });

Por:

app.get('/', function(req, res) { 
    // Array de objetos das reservas
    reservationsArray = [
        {_id: 1, nome: 'teste', email: '[email protected]'}, 
        {_id: 2, nome: 'teste1', email: '[email protected]'},
        {_id: 3, nome: 'teste2', email: '[email protected]'}
    ]
    res.render('index', { title: 'DATA BASE', reservations: reservationsArray }); 
});

Neste caso estamos passando o valor da primeira página junto com o título quando renderizamos a index, vale lembrar que em uma aplicação real você provavelmente irá obter a array de algum método de algum objeto que se conecta a algum banco de dados.

Ai na index.ejs nós adicionamos dentro do tbody o seguinte código:

<% reservations.foreach( function (reservation) { %>
    <tr class="reservas">
        <td><%= reservation._id %></td>
        <td><%= reservation.nome %></td>
        <td><%= reservation.email %></td>
    </tr>
<% }); %>

Isso irá renderizar as reservas na página, sem a necessidade de usar AJAX.

O que você pode fazer em seguida é começar a trabalhar com PushState e algum sistema de templates do lado do cliente (que pode ser o próprio EJS), neste caso quando alguém fosse trocar de página (ex. página 2) você pode mudar a URL sem recarregar a página e pode usando AJAX obter os dados em JSON da próxima página, passar eles para a função de template (o underscore por exemplo tem uma) e depois com o output em HTML atualizar os dados.

1
  • Obrigado, muito bem explicado ooredroxoo.
    – user14869
    Commented 7/09/2014 às 5:56

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