Как работать с JS-шаблонизаторами?

283

02 июля 2017, 16:32

Привет. В проекте возникла необходимость использовать JS-шаблонизаторы, но я я понятия не имею, как их использовать даже после изучения документации. Например, мне нужно вывести столько блоков, сколько содержится в json-массиве. Сейчас реализация такова:

<div class="carriers">
    ${(proposals[i].carriers).map(name => '<img src="//pics.avs.io/80/40/' + name + '@2x.png" alt="' + name + '" />').join('')}
</div>

В блок с классом carriers выводится то количество изображений, которое указано в массиве ["AF","PS"]. Как добиться такого же функционала используя Handlebars.js?

Answer 1

Шаблон будет выглядеть так

{{#each proposals}}
  <div class="carriers">
    {{#each this.carriers}}
      <img src="//pics.avs.io/80/40/{{this}}@2x.png" alt="{{this}}" />
    {{/each}}
  </div>
{{/each}}

Полный код примера:

var data = { 
  proposals: [{ 
    carriers: ["AF", "PS"] 
  }] 
}; 
 
var source = $("#template").html(); 
var template = Handlebars.compile(source); 
$('body').append(template(data));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.min.js"></script> 
 
<script id="template" type="text/x-handlebars-template"> 
  {{#each proposals}} 
  <div class="carriers"> 
    {{#each this.carriers}} 
    <img src="//pics.avs.io/80/40/{{this}}@2x.png" alt="{{this}}" /> {{/each}} 
  </div> 
  {{/each}} 
</script>