Clientseitiges und serverseitiges Rendering von EJS-Vorlage

Question

Ich wollte immer NodeJS lernen, um den gleichen Code auf Server- und Clientseite ausführen zu können. Ich benutze NodeJS mit Express und EJS. So. Ich habe eine .ejs-Seite mit viel HTML, JS, CSS und ein wenig mit Vorlage. Aus Gründen der Gerechtigkeit läßt es so aussehen:

the_list -> some.ejs

<ul> 
<% for(i=0;i>the_list.length;i++) { %> 
    <li>the_list[i]</li> 
<% } %> 
</ul>  

Nach einigem Rendering auf dem Server wir eine perfekte Liste haben.

So. Jetzt möchte ich es auf dem Client neu rendern. Ich habe eine Ajax-Anfrage gestellt und jetzt habe ich neue Gegenstände in der_liste. Was ist der richtige Weg?

Answer 1

Per ejs templates documentation

var template = new EJS({ 
    text: ` 
    <ul> 
     <% for(i = 0; i < the_list.length; i++) { %> 
     <li>the_list[i]</li> 
     <% } %> 
    </ul> 
    ` 
}); 
var html = template.render({ the_list: data }); 
document.getElementById('list-wrapper').innerHTML = html; 

Answer 2

Diese funktionieren sollte, sieht aus wie Ihr Problem der relationale Operator '>' war, weil es nie Ausgabe etwas wird.

<ul> 
    <% for(var i=0; i<the_list.length; i++) { %> 
     <li> 
      <a> 
       <%= the_list[i]%> 
      </a> 
     </li> 
    <% } %> 
</ul> 

können Sie eine Dokumentation prüfen here

Answer 3

<div id="output"></div> 
<script src="/assets/js/ejs.js"></script> 
<script> 
    let blogPosts = [ 
    { 
     title: 'Perk is for real!', 
     body: '...', 
     author: 'Aaron Larner', 
     publishedAt: new Date('2016-03-19'), 
     createdAt: new Date('2016-03-19') 
    }, 
    { 
     title: 'Development continues...', 
     body: '...', 
     author: 'Aaron Larner', 
     publishedAt: new Date('2016-03-18'), 
     createdAt: new Date('2016-03-18') 
    }, 
    { 
     title: 'Welcome to Perk!', 
     body: '...', 
     author: 'Aaron Larner', 
     publishedAt: new Date('2016-03-17'), 
     createdAt: new Date('2016-03-17') 
    } 
]; 
     var html = ejs.render(`<% for(let i = 0; i < posts.length; i++) { %> 
    <article> 
     <h2><%= posts[i].title %></h1> 
     <p><%= posts[i].body %></p> 
    </article> 
<% } %>`, {posts: blogPosts}); 
    // Vanilla JS: 
    document.getElementById('output').innerHTML = html; 
</script> 

herunterladen ejs.js oder ejs.min.js von neueste Version