javascript - 使用 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 帮助器输出名称

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

Answer 1

您可以直接使用 this.<index>.<property> 访问数组对象。所以在你的情况下它会像 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>