ejs模板的客户端和服务器端渲染

Question

我一直想学习 NodeJS 以便能够在服务器端和客户端运行相同的代码。我正在将 NodeJS 与 Express 和 EJS 一起使用。所以。我有一个 .ejs 页面，里面有很多 HTML、JS、CSS 和一些模板。为了正义，让它变成这样：

the_list-->some.ejs

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

在服务器上进行一些渲染后，我们有一个完美的列表。

所以。现在我想在客户端重新渲染它。我提出了一些 ajax 请求，现在我在 the_list 中有新项目。什么是正确的方法？

Answer 1

根据 ejs模板文档

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

<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>

从最新版本下载 ejs.js 或 ejs.min.js