#eachを使用してhandlebars.jsのデータを表示しない

Question

私は静的なWebサイトをデータ駆動型のものに変換しているプロジェクトを持っています。今はそれぞれのページの内容が反映されるように変更しようとしていますデータオブジェクトを介してウェブサイト。私が使用している

：Node.jsの、ハンドルバーは、

私のindex.jsファイルはこの

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

のように見えるこの

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のような物を持って表現します

なんらかの理由で、ページに何も表示されないように何も表示されません。 "item"はitem1 item2 item3を繰り返してWebサイトの各ページを表示する必要がありますので、私のボタンを押すたびに増分する必要があります（これは通常のWebサイトでは動作しますが、

Answer 1

itemのプロパティは、テンプレートに渡すオブジェクトに何を指定する必要があるように見えます（テンプレートに渡すオブジェクトに{pagetitle}}と{{text}}は表示されません）。 item配列内の項目を反復する。

をテンプレートをレンダリングしている場合、itemのプロパティの下item配列で渡します。そうすることで、OVテンプレートはitemプロパティが表示され、それが繰り返されます予想どおりのアイテム。

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

あなたはおそらくハンドルが渡されたオブジェクトのプロパティされていないにも関わらず、item変数をレンダリングするためのテンプレートと予想するので、いくつかの混乱がありそうあった理由は。

ここでは基本的な例でありますあなたがtemplatをレンダリングするとき

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>