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

Hi have a project where i'm converting a static website into a datadriven one, for now i am just trying to change so the content of each page is taken into the website through a data object.

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

I'm using : node.js, handlebars, express

我正在使用：node.js，handlebars，express

My index.js file has an object like this

我的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'
}];

my index.hbs looks like this

我的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>

For some reason nothing is displayed on the page like it should be. "item" should iterate item1 item2 item3 to display each page of the website so i need that to increment every time i press my button (this works on the normal website but i can't get it to work with @key. Also the {{pagetitle}} and {{text}} do not display at all on the website.

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

1 个解决方案

#1

It looks like you need to specify what the item property is on the object that you are passing to the template in order for the template to iterate over the items in the item array.

看起来您需要指定要传递给模板的对象上的item属性，以便模板迭代item数组中的项。

When you are rendering the template, pass in the item array under the property of item. In doing so, your template will see the item property and it will iterate over the items as expected.

渲染模板时，传入item属性下的item数组。这样，您的模板将看到item属性，它将按预期迭代项目。

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

The reason there was likely some confusion was because you probably expected the handlebars template to render the item variable, despite not being a property on the object that was passed in.

可能存在一些混淆的原因是因为您可能期望把手模板呈现项目变量，尽管它不是传入的对象的属性。

Here is a basic example demonstrating this:

这是一个证明这一点的基本例子：

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>

#1