重复使用 Handlebars 查找

Question

给定一组对象，我想使用一个属性嵌套对象来查找 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>

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>

重复使用 Handlebars 查找

Using Handlebars lookup with repetition

javascript

template-engine

handlebars.js