javascript - 使用#each 在 handlebars.js 中显示一些数据不显示

Question

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

我正在使用:node.js、handlebars、express

我的 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}} 根本不会在网站上显示。

Answer 1

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

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

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

可能存在一些混淆的原因是因为您可能希望 Handlebars 模板呈现 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>