javascript - hogan js 中的复杂迭代逻辑？

Question

我正在尝试学习expressjs，我有一个查询数据库的 Controller ，并返回一个 JSON 对象，如下所示:

[ { _id: 58cb851721c1c107ab436686,                                                                                                                             
   title: 'some title',                                                                                                                        
   content: 'this is content' },                                                                                                           
  { _id: 58cb856321c1c107ab436688,                                                                                                                             
   title: 'ah yes',                                                                                                                                           
   content: 'more title and contents' } 
   ...
   ...
]

我现在想要做的是在 MDL 卡布局中显示数组中的每个元素。因此，如果上面的 json 对象有 20 个对象，则应该有 20 个卡片，每个卡片显示各自的 _id、title 和 content 属性的值。为此，我必须使用类似这样的 for 循环:

for(var i = 0; i < data.length; i++) {
    <span> {{ data[i]._id }} </span> </br>
    <span> {{ data[i].title }} </span> </br>
    <span> {{ data[i].content }} </span> </br>
  }

对于像 ejs 这样的东西来说，这显然非常容易，因为它允许在模板内循环逻辑。但我不知道如何做到这一点，因为 HoganJS 缺乏适当的文档显然没有帮助。我在互联网上搜索了很多没有结果。目前我正在渲染模板，如下所示:

res.render('index');

在霍根可以做到这一点吗？如何？或者我需要在 route 做一些体操？

Answer 1

Hogan.js 是针对 mustache 测试套件开发的，因此适用于指定模板的所有内容也适用于 hogan.js。

检查https://mustache.github.io/mustache.5.html

这样的事情应该有效:

var obj = {
  data: [{ 
    _id: 58cb851721c1c107ab436686,                                                                                                                             
    title: 'some title',                                                                                                                        
    content: 'this is content'
  }, {
    _id: 58cb856321c1c107ab436688,                                                                                                       
    title: 'ah yes',                                                                                                                                           
    content: 'more title and contents'
  },  
  ...
  ]};

和模板:

{{#data}}
  <span>{{_id}}</span>
  <span>{{title}}</span>
  <span>{{content}}</span>
{{/data}}