Handlebars 通过占位符中的索引访问嵌套数组值

Question

我只是从 handlebars.js 开始渲染 json，但我不确定如何使用索引访问嵌套 json 数组的值。

下面是模板，我试过 {{this.1}} 和 {{1}}，但没有成功

<div>{{name}}<div>
    {{#each params}}<div>
        <span>{{this.1}}</span>
        <input type="checkbox" name="opt_{{../id}}[]" value="{{this.0}}">
    </div>{{/each}}
</div></div>

以下是 JSON 字符串，以防万一：

{
    "id": 5753,
    "name": "Состав съемщиков",
    "params": [
      [15868, "Семья"],
      [15911, "Женщина"],
      [15913, "Мужчина"]
    ]
  }

Answer 1

你能调整你的 JSON 对象吗？ 如果是这样，我会尝试以下方法：

Html正文：

  <h1>Handlebars JS Example</h1>
    <script id="some-template" type="text/x-handlebars-template"> 
    <div>
      {{this.name}}
      <div>
        {{#each this.params}}
        <div>
          <span>{{this.txt}}</span>
          <input type="checkbox" name="opt_{{../id}}[]" value="{{this.id}}">
        </div>
       {{/each}}
      </div>
   </div>
   </script>

index.js

var source = $("#some-template").html(); 
var template = Handlebars.compile(source); 

var data = {
    "id": 5753,
    "name": "Состав съемщиков",
    "params": [
      {"id": "15868", "txt":"Семья"},
      {"id": "15911", "txt":"Женщина"},
      {"id": "15913", "txt":"Мужчина"}
    ]
}

$('body').append(template(data));

结果：

Handlebars JS Example
Состав съемщиков
<!-- these are checkboxes but I can't insert a picture.. -->
Семья  
Женщина  
Мужчина

我认为这是 由于您的 JSON 对象格式，下面是我刚刚概述的解决方案的实例：

var source = $("#some-template").html(); 
var template = Handlebars.compile(source); 

var data = {
    "id": 5753,
    "name": "Состав съемщиков",
    "params": [
      {"id": "15868", "txt":"Семья"},
      {"id": "15911", "txt":"Женщина"},
      {"id": "15913", "txt":"Мужчина"}
    ]
  }

$('body').append(template(data));

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Handlebars JS Example</h1>
<script id="some-template" type="text/x-handlebars-template"> 
<div>{{this.name}}<div>
    {{#each this.params}}<div>
        <span>{{this.txt}}</span>
        <input type="checkbox" name="opt_{{../id}}[]" value="{{this.id}}">
    </div>{{/each}}
</div></div>
</script>

希望这对您有所帮助:)

Answer 2

使用数组索引的语法在方括号中 [0]，这是我的工作模板：

<div>{{this.name}}<div>
    {{#each this.params}}<div>
        <span>{{this.[1]}}</span>
        <input type="checkbox" name="opt_{{../id}}[]" value="{{this.[0]}}">
    </div>{{/each}}
</div></div>

Handlebars 通过占位符中的索引访问嵌套数组值

Handlebars access nested array values by index in placeholders

handlebars.js