javascript - 如何使用 hoganjs 模板显示 for 循环内的项目数

Question

我有一个对象，我想限制前端显示的Item数量。问题是我正在使用 hogan js 模板来渲染 HTML。我不明白如何在hogan js中实现逻辑。

路线我设置对象的代码:

res.render('search', {
          layout : 'layouts/main/default',
          partials:{
                   Header: "includes/main/header",
                   Slider: "includes/main/slider",
                   Contact: "includes/main/contact",
                   Footer: "includes/main/footer",
                   Search : "includes/main/search"
          },
          title   :  'Result',
          product :  data.product, //here I set the product Json data 
          total   :  totalProducts,
 })

产品 JSON 包含如下数据:

{ product: 
   [ { link: 'http://www.walmart.com/ip/Straight-Talk-Samsung-Prepaid-Galaxy-GRAND-Prime-LTE-S920C-Smartphone/46716301',
       image: 'http://i5.walmartimages.com/dfw/dce07b8c-39c4/k2-_b4b0e2b5-8534-4979-8953-aae10886c54c.v1.jpg',
       name: 'Straight Talk <mark>Samsung</mark> Galaxy GRAND Prime 4G LTE Android Prepaid Smartphone',
       price: '149',
       logo: '/images/wal.png',
       siteName: 'Walmart'
      },
      { link: 'http://www.walmart.com/ip/T-Mobile-Samsung-Galaxy-S4-Prepaid-Smartphone/43388843',
       image: 'http://i5.walmartimages.com/dfw/dce07b8c-d26b/k2-_8f1131b8-61d3-4760-8129-9a740eb10e9b.v1.jpg',
       name: 'T-Mobile <mark>Samsung</mark> Galaxy S4 Prepaid Smartphone',
       price: '149',
       logo: '/images/wal.png',
       siteName: 'Walmart' 
      },
      ......
      ......
     ]
}

Search.hjs 包含 html 代码:

<div class="row">
     {{#product}}
     <div class="col-md-4 col-sm-6">
        <div class="center">
           <img src="{{image}}"  class="img-rounded" height="100" width="100"/>
           <h4>{{name}}</h4>
           <h4>{{price}}</h4>
           <a href="{{link}}"> <button type="button" class="btn btn-info">View Details</button></a>
        </div>
     </div>
     {{/product}}
</div>

我想一次只显示三个产品。

Answer 1

I didn't understand how to implement the logic in hogan js.

Hogan(以及它所基于的 Mustache)被称为逻辑更少模板引擎。它不为您提供从模板内执行此类任务的逻辑。

I want to limit the number of Items displayed at the front end

您必须限制服务器端的数组大小:

product : data.product.slice(0, 3)