使用 Handlebars 查找助手访问数组中的对象并输出属性

Question

我正在使用 handlebars 查找助手根据索引查找数组中的对象。

不幸的是，我无法输出对象的属性。

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/

这是一个演示我的问题的简化示例。我知道有更简单的方法可以使用 each helper

输出名称

编辑：这是一个更新的jsfiddle版本，更接近我需要实现的：https://jsfiddle.net/sgu2mmdz/6/

Answer 1

您可以使用 this.<index>.<property> 直接访问数组对象。因此，在您的情况下，从 employees 数组中的第一个元素获取名称类似于 this.0.name 。这是更新后的 fiddle：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>

使用 Handlebars 查找助手访问数组中的对象并输出属性

Use Handlebars lookup helper to access Object in array and output property

javascript

handlebars.js

使用 Handlebars 查找助手访问数组中的对象并输出 属性

Use Handlebars lookup helper to access Object in array and output property

javascript

handlebars.js

使用 Handlebars 查找助手访问数组中的对象并输出属性