使用 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/

这是一个简化的示例来演示我的问题。我知道有更简单的方法，所以使用 each 帮助器输出名称

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

Answer 1

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