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

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

我正在使用: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来显示网站的每一页,所以我需要增加每次我按下我的button(这在正常的网站上工作,但我不能得到它与@key工作还{ {pagetitle}}和{{text}}完全不显示在网站上。

看起来您需要指定要传递给模板的对象上的item属性,以便模板遍历item数组中的item

在渲染模板时,传入item属性下的item数组。 在这样做的时候,你的模板会看到item属性,并且会按照预期迭代项目。

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

可能有些混淆的原因是因为您可能预期句柄模板呈现itemvariables,尽pipe不是传入的对象的属性。

这是一个基本的例子:

 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>