使用#each 显示handlebars.js 中的一些数据不显示答案

【问题标题】：Using #each to display some data in handlebars.js not displaying使用#each 显示handlebars.js 中的一些数据不显示
【发布时间】：2017-06-19 19:16:42
【问题描述】：

您好，我有一个项目，我正在将静态网站转换为数据驱动的网站，现在我只是尝试进行更改，以便通过数据对象将每个页面的内容带入网站。

我正在使用：node.js、车把、快递

我的 index.js 文件有一个像这样的对象

var item = [{
  pagetitle: 'Page 1',
  text: 'content page 1'
}, {
  pagetitle: 'Page 2',
  text: 'content page 2'
}, {
  pagetitle: 'Page 3',
  text: 'content page 3'
}, {
  pagetitle: 'Page 4',
  text: 'content page 4'
}, {
  pagetitle: 'Page 10',
  text: 'content page 10'
}];

我的 index.hbs 看起来像这样

<div class="bb-blah">
  {{title}
  {{#each item}}
  <div class="bb-item" id="item{{@key}}">
     <h2>{{pagetitle}}</h2>
     <div class="cols-2">
         <p>{{text}}</p>
     </div>
  </div>
  {{/each}}
</div>

由于某种原因，页面上没有显示应有的内容。 “item”应该迭代 item1 item2 item3 以显示网站的每个页面，所以我需要在每次按下按钮时增加它（这适用于普通网站，但我无法让它与 @key 一起使用。还有 { {pagetitle}} 和 {{text}} 根本不显示在网站上。

【问题讨论】：

渲染模板时，您必须向其传递一些数据。你传递什么数据？我问 b/c 你声明了var item，但是模板还有其他不在item 数组中的属性（如title）。也许您只需要将包含在一个对象中的所有数据提供给模板。

标签： javascript html node.js handlebars.js

【解决方案1】：

您似乎需要指定要传递给模板的对象的 item 属性，以便模板遍历 item 数组中的项目。

渲染模板时，传入item属性下的item数组。这样做时，您的模板将看到 item 属性，并将按预期遍历项目。

var template = Handlebars.compile(html);
var rendered = template({
  item: item
});

可能有些混淆的原因是因为您可能希望车把模板呈现 item 变量，尽管它不是传入对象的属性。

下面是一个基本示例：

var html = $("#template").html();
var template = Handlebars.compile(html);

var item = [{pagetitle : 'Page 1', text:'content page 1'},
{pagetitle : 'Page 2', text:'content page 2'},
{pagetitle : 'Page 3', text:'content page 3'},
{pagetitle : 'Page 4', text:'content page 4'},
{pagetitle : 'Page 10', text:'content page 10'}];

$('body').append(template({item: item}));

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script id="template" type="text/x-handlebars-template">
{{#each item}}
<div class="bb-item" id="item{{@key}}">
   <h2>{{pagetitle}}</h2>
   <div class="cols-2">
       <p>{{text}}</p>
   </div>
</div>
{{/each}}
</script>

【讨论】：