如何使用handlebars.js处理json数据

Question

I'm confused how can I get this json data through handlebars, this is from connecting into a api sample.. thank you so much .

[
  {
    "template_name": "Sample",
    "preview_url": "http://sample.com",
    "thumbnail_url": "https://sample.jpg",
    "template_id": 10010101,
    "template_properties": {
      "can_build_from_url": false
    }
  },
   {
    "template_name": "Sample",
    "preview_url": "http://sample.com",
    "thumbnail_url": "https://sample.jpg",
    "template_id": 10010101,
    "template_properties": {
      "can_build_from_url": false
    }
  },
  {
    "template_name": "Sample",
    "preview_url": "http://sample.com",
    "thumbnail_url": "https://sample.jpg",
    "template_id": 10010101,
    "template_properties": {
      "can_build_from_url": false
    }
  }
]

this is my code trying to get the data from my javascript templating using handlebars:

  <script id="apiTemplate" type="text/template">


        <div class="templates">
      <div class="photo-col">
        <img src="{{thumbnail_url}}" alt="" />
      </div>
      <div class="info-col">
        <h2 class="temp-name">Template Name: {{template_name}}</h2>
        <ul>
          <li>ID: {{template_id}}</li>
          <li>Can build from URL: {{template_properties.can_build_from_url}}</li>
        </ul>
        <div class="start">
          <a href="{{preview_ur}}"><button>Preview Temaplate</button></a>
        </div>

      </div>
    </div>

  </script>