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

Posted 2023-03-07

【中文标题】使用#each 显示handlebars.js 中的一些数据不显示

【英文标题】：Using #each to display some data in handlebars.js not displaying

【发布时间】：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）。也许您只需要将包含在一个对象中的所有数据提供给模板。

【参考方案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>