江苏龙网

  1. 主页 > 生活百科 > >

Node/JavaScript中的模板引擎( 三 )

模板引擎

  • 期待你们的留言
{{/if}}
这里我们的 comments 为空 ， 所以显示了 期待你们的留言 。
Node/JavaScript中的模板引擎

文章插图
 
#if是把 Handlebars 的内置帮助器 。如果if语句返回true ， 则将渲染#if块内部的块 。如果返回false ， undefined ， null ， "" ， 0或[] ， 则不会渲染该块 。
#if仅接受一个条件 ， 并且不能使用 JS 比较语法（===） 。如果需要使用多个条件或其他语法 ， 则可以在代码中创建一个变量 ， 然后将其传递给模板 。另外 ， 你可以定义自己的 helper  ， 我们将在上一节中进行操作 。
使用循环由于帖子可以包含多个评论 ， 因此我们需要一个循环渲染它们 。首先 ， 我们先添加一些数据：
app.get('/', function (req, res) {  res.render('home', {      post: {          author: '小智',          image: '/uploads/allimg/220422/1R64VU3-1.jpg',          comments: [            '前端小智终身学习者',            '前端小智持续分享者',            '虽然没啥流量 ， 但也希望你也能坚持分享下去 ， 帮助更多的初学者 '          ]      }  });});现在 ， 在我们的模板中 ， 使用#each循环遍历它们：
<nav class="navbar navbar-dark bg-dark">    <a class="navbar-brand" href=https://www.isolves.com/it/cxkf/yy/js/2020-10-19/"#">Book Face
Node/JavaScript中的模板引擎
此文章由 {{post.author}} 发布
{{#if post.comments}}
    {{#each post.comments}}
  • {{this}}
    • {{/each}}
{{else}}
  • 期待你们的留言
{{/if}}
在#each循环中 ， 可以使用this来引用当前迭代中的元素 。在我们的示例中 ， 它引用了一个随后被渲染的字符串
Node/JavaScript中的模板引擎

文章插图
 
如果posts是一个对象数组 ， 你也可以访问该对象的任何属性 。例如 ， 如果有一个人员数组 ， 你可以简单地使用this.name来访问name字段 。
现在 ， 为我们的 posts 添加多个数据:
app.get('/', function (req, res) {  res.render('home', {      posts: [        {          author: '小智',          image: '/uploads/allimg/220422/1R64VU3-1.jpg',          comments: [            '前端小智终身学习者',            '前端小智持续分享者',            '虽然没啥流量 ， 但也希望你也能坚持分享下去 ， 帮助更多的初学者 '          ]        },        {          author: '前端大智',          image: '/uploads/allimg/220422/1R64VU3-1.jpg?2',          comments: []        }      ]  });});


推荐阅读


上一篇：俄罗斯蓝猫属于 蓝猫和俄罗斯蓝猫的区别

下一篇：有贵气的女人 有贵气的人