使用#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 });
可能有些混淆的原因是因为您可能预期句柄模板呈现item
variables,尽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>