Layout/template for ArrayField items?

[jstockwin]

I have an Array field (in this example a list of "malts"), which are objects with properties "name", "quantity" and "specific_gravity".

I would like to be able to control how these items are laid out.

To show you what I mean, the following code works as a field template for my malts field:

  <script type="text/x-handlebars-template" id="malt-template">
    <div class="row">
      <div class="col-xs-6">
        {{#with items.[0]}}
          {{#item}}{{/item}}
        {{/with}}
      </div>
      <div class="col-xs-3">
        {{#with items.[1]}}
          {{#item}}{{/item}}
        {{/with}}
      </div>
      <div class="col-xs-3">
        {{#with items.[2]}}
          {{#item}}{{/item}}
        {{/with}}
      </div>
    </div>
  </script>

(Full example: https://jsfiddle.net/r5Lev68y/)

You can see that each "malt" now displays on one line, with slightly more space for the name than the other two fields.

However, I was hoping there might be a way to access the items by name, rather than index?

For example, being able to provide the following as a template and provide bindings for the items of the array would be cool:

  <script type="text/x-handlebars-template" id="malt-template">
    <div class="row">
      <div class="col-xs-6" id="left">
      </div>
      <div class="col-xs-3" id="middle">
      </div>
      <div class="col-xs-3" id="right">
      </div>
    </div>
  </script>

Alternatively, given in the working example {{ items }} is a single array item, is there some way to allow doing {{ item.name }}, etc?

If there is something I am missing that would allow me to do this, then please do point me to the right place.

Otherwise, if it's possible to change something to make it work I'd be happy to help (although will need some pointers for the right place).