Question

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

the_list - ＆GT; some.ejs

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

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

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

Answer 1

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

<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

Answer 3

这应该有用，看起来你的问题是关系运算符'＆gt;'因为它永远不会输出一些东西。

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

您可以查看一些文档here

客户端和服务器端呈现ejs模板

3 个答案: