Handlebarsルックアップヘルパーを使用して配列と出力プロパティのオブジェクトにアクセスする

Question

ハンドルバーのルックアップヘルパーを使用して、インデックスに基づいて配列内のオブジェクトを検索しています。

不運にも私はオブジェクトのプロパティを出力することはできません。

HTML：

<script id="entry-template" type="text/x-handlebars-template"> 
     <div class="entry"> 
     <h1>Employees</h1> 
     <div class="body"> 
      <ul> 
      <li> 1.Employee {{lookup this 0}}</li> 
      <li> 2.Employee {{lookup this 1}}</li> 
      </ul> 
     </div> 
     </div> 
    </script> 

    <div id="content"> 

    </div> 

Javascriptを：

var employees = [ { name : 'Joe'}, { name : 'Bob'} ]; 

var source = $("#entry-template").html(); 
var template = Handlebars.compile(source); 

var html = template(employees); 

$('#content').append(html); 

とjsfiddle：https://jsfiddle.net/sgu2mmdz/1/

これは私の問題を実証するための簡略化した例です。私は、出力ので、名前の各ヘルパーに

Editを使用してsimplier方法があることを認識しています：https://jsfiddle.net/sgu2mmdz/6/

Answer 1

あなたがアクセスすることができました：これは私が達成するために必要なものに近いバージョンで更新jsfiddleです配列オブジェクトは直接this.<index>.<property>となります。だからあなたの場合は、this.0.nameのようなもので、employees配列の最初の要素から名前を取得します。更新されたフィドルは次のとおりです：https://jsfiddle.net/sgu2mmdz/3/

私はこれが欲しいと思っています。もちろん、あなたが質問で言及したように、それはeachを使って行うこともできます。

また、logを使用してこのような問題をデバッグすることをお勧めします。それはしばしば間違っていることを特定するのに役立ちます。

var employees = [ { name : 'Joe'}, { name : 'Bob'} ]; 
 

 
var source = $("#entry-template").html(); 
 
var template = Handlebars.compile(source); 
 

 
var html = template(employees); 
 

 
$('#content').append(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.js"></script> 
 

 
<script id="entry-template" type="text/x-handlebars-template"> 
 
     <div class="entry"> 
 
     <h1>Employees</h1> 
 
     <div class="body"> 
 
      <ul> 
 
      <li> 1.Employee {{this.0.name}}</li> 
 
      <li> 2.Employee {{this.1.name}}</li> 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    </script> 
 

 
    <div id="content"> 
 

 
    </div>