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>

由于某种原因，页面上没有显示任何内容。＆＃34;项目＆＃34;应该迭代item1 item2 item3以显示网站的每个页面，所以我每次按下我的按钮时都需要增加（这可以在普通网站上运行，但我无法使用@key工作。同时{{{ pagetitle}}和{{text}}根本不会在网站上显示。

Answer 1

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

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

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

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

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

＆＃13;

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}));

＆＃13;

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

＆＃13;

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

1 个答案: