繰り返しを使ったハンドルバールックアップの使用

Question

オブジェクトの配列を与えられた場合、ネストされたオブジェクトの1つのプロパティを使用して、ハンドルバーの関連オブジェクトのさまざまなプロパティをルックアップしたいと思います。

この例では、各大学の生徒のリストと、各生徒が所属する学科の情報を示します。

私のコードは動作しますが、ネストされた検索は非常に反復している：

{{lookup (lookup ../majors major) 'dean'}} 
{{lookup (lookup ../majors major) 'location'}} 

は、私はこれについて何かできることはありますか？私は、ルックアップのコンテキストにアクセスやりたいと思い、このような何か：

{{#lookup ../majors major}} 
    {{dean}} 
    {{location}} 
{{/lookup}} 

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

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

 
<script id="hb-template" type="text/x-handlebars-template"> 
 
    {{#universities}} 
 
    <h1>{{name}}</h1> 
 
    {{#students}} 
 
    <h2>{{name}}</h2> 
 
    <dl> 
 
    <dt>Major</dt> 
 
    <dd>{{major}}</dd> 
 
    <dt>Department dean</dt> 
 
    <dd>{{lookup (lookup ../majors major) 'dean'}}</dd> 
 
    <dt>Department location</dt> 
 
    <dd>{{lookup (lookup ../majors major) 'location'}}</dd> 
 
    </dl> 
 
    {{/students}} 
 
    {{/universities}} 
 
</script> 
 

 
<div id="hb-html"> 
 
</div> 
 

 
<script> 
 
    var context = { 
 
    "universities": [{ 
 
     "name": "Example University", 
 
     "students": [{ 
 
      "name": "Alice", 
 
      "major": "Business" 
 
      }, 
 
      { 
 
      "name": "John", 
 
      "major": "English" 
 
      } 
 
     ], 
 
     "majors": { 
 
      "English": { 
 
      "dean": "Dr. Smith", 
 
      "location": "Room 101" 
 
      }, 
 
      "Business": { 
 
      "dean": "Dr. Jones", 
 
      "location": "Room 999" 
 
      } 
 
     } 
 
     }, 
 
     { 
 
     "name": "Another University", 
 
     "students": [{ 
 
      "name": "Bob", 
 
      "major": "Business" 
 
     }], 
 
     "majors": { 
 
      "Business": { 
 
      "dean": "Dr. Zimmerman", 
 
      "location": "South Campus" 
 
      } 
 
     } 
 
     } 
 
    ] 
 
    }; 
 
</script>

Answer 1

ここでは私のソリューションです：ルックアップ部分式の結果を{{#with}} helperを使用して、それを渡します - オブジェクト。私はこれが最善の方法であるかどうか、あるいは本当になぜこれが機能するのか分からないので、コメントを感謝します。

{{#with (lookup ../majors major)}} 
    <dt>Department dean</dt> 
    <dd>{{dean}}</dd> 
    <dt>Department location</dt> 
    <dd>{{location}}</dd> 
{{/with}} 

全例：

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

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

 
<script id="hb-template" type="text/x-handlebars-template"> 
 
    {{#universities}} 
 
    <h1>{{name}}</h1> 
 
    {{#students}} 
 
    <h2>{{name}}</h2> 
 
    <dl> 
 
    <dt>Major</dt> 
 
    <dd>{{major}}</dd> 
 
    {{#with (lookup ../majors major)}} 
 
    <dt>Department dean</dt> 
 
    <dd>{{dean}}</dd> 
 
    <dt>Department location</dt> 
 
    <dd>{{location}}</dd> 
 
    {{/with}} 
 
    </dl> 
 
    {{/students}} 
 
    {{/universities}} 
 
</script> 
 

 
<div id="hb-html"> 
 
</div> 
 

 
<script> 
 
    var context = { 
 
    "universities": [{ 
 
     "name": "Example University", 
 
     "students": [{ 
 
      "name": "Alice", 
 
      "major": "Business" 
 
      }, 
 
      { 
 
      "name": "John", 
 
      "major": "English" 
 
      } 
 
     ], 
 
     "majors": { 
 
      "English": { 
 
      "dean": "Dr. Smith", 
 
      "location": "Room 101" 
 
      }, 
 
      "Business": { 
 
      "dean": "Dr. Jones", 
 
      "location": "Room 999" 
 
      } 
 
     } 
 
     }, 
 
     { 
 
     "name": "Another University", 
 
     "students": [{ 
 
      "name": "Bob", 
 
      "major": "Business" 
 
     }], 
 
     "majors": { 
 
      "Business": { 
 
      "dean": "Dr. Zimmerman", 
 
      "location": "South Campus" 
 
      } 
 
     } 
 
     } 
 
    ] 
 
    }; 
 
</script>