Question

使用handlebars.js，可以在与此处所示相同的级别上显示数组的第一个元素：

{{#each array01}}
    {{#if @first}}{{objectAttribute01}}{{/if}}
{{/each}}

但是，如果我有一个如下所示的嵌套数组，如何检查array03的第一个元素，而不是array01？

{{#each array03}}
    {{#each array02}}
         {{#each array01}}
             {{#if @first}}{{objectAttribute01}}{{/if}}
         {{/each}}   
    {{/each}}   
{{/each}}

以下内容无效：

@../../first

Answer 1

我通过使用收集父索引的自定义函数解决了我的问题：

javascript：

var indexLevel01 = 0;
var indexLevel02 = 0;

function setIndexLevel01(indexEntry)
    {indexLevel01 = indexEntry;}

function setIndexLevel02(indexEntry)
    {indexLevel02 = indexEntry;}

function onlyShowFirstOfLevel01(attributeEntry)
    {//start onlyShowFirstOfLevel01
        if(indexLevel01 === 0 && indexLevel02 === 0)
            {return attributeEntry}
        else{return ""}
    }//end onlyShowFirstOfLevel01

html：

{{#each array03}}
    {{#each array02}}{{setIndexLevel01 @index}}
         {{#each array01}}{{setIndexLevel02 @index}}
             {{onlyShowFirstOfLevel01 objectAttribute01}}
         {{/each}}   
    {{/each}}   
{{/each}}

Answer 2

FWIW

您尝试过的方法应该可以奏效。

{{#if @../../first}}

请参见摘要：

var data = {
  array03: [{
    array02: [{
      array01: [{
        objectAttribute01: 'foo'
      }]
    }]
  }, {
    array02: [{
      array01: [{
        objectAttribute01: 'bar'
      }]
    }]
  }]
};

var source = $('#entry-template').html();
var template = Handlebars.compile(source)(data);

$('body').html(template)

<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.12/handlebars.min.js"></script>

<script id="entry-template" type="text/x-handlebars-template">
{{#each array03}}
    {{#each array02}}
         {{#each array01}}
             {{#if @../../first}}{{objectAttribute01}}{{/if}}
         {{/each}}   
    {{/each}}   
{{/each}} 
</script>

Answer 3

车把支持 ../ 路径段。该段引用父模板作用域。仅在上下文更改时才需要使用 ../

进入您的代码，

{{#each array03}}
     {{#each array02}}
         {{#each array01}}
             {{#if @first}}{{objectAttribute01}}{{/if}}
        {{/each}}   
    {{/each}}   
{{/each}}

将其更改为：

{{#each array03}}
     {{#each array02}}
          {{#each array01}}
              {{#if @../../first}}{{objectAttribute01}}{{/if}}
        {{/each}}   
     {{/each}}   
{{/each}}

您可以访问 array03 和 array02 的第一个元素，例如 @../../first 和< strong> @../first 。

在handlebars.js上，如何在父级上使用#first？

3 个答案:

FWIW