使用重复查找手柄

给定一个对象数组，我想使用嵌套对象的一个属性来查找Handlebars中关联对象中的各种属性。使用重复查找手柄

在这个例子中，我想列出每个大学的学生名单以及每个学生所属部门的信息。

我的代码工作，但嵌套查询是非常重复性：

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

来源

2017-02-28 Martin Burch

这里是我的解决方案：使用{{#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>

来源

2017-02-28 23:34:55

使用重复查找手柄

回答

相关问题