Javascript 如何使用Handlebar和jQuery渲染数据

我有这个html，我需要在其中呈现数据

default.hbs

<div class="chart-container" data-action="chartContainer">

  <ul>
   <li class="department">
     <h3>Enterprise</h3>
      <ul class="sections">
        // HERE I NEED TO RENDER THE DATA IN AN <li> TAG
      </ul>
    </li>
  </ul>

</div>

函数

iterateObj

返回

[
   {
      "enterprise":[
         {
            "id":"10",
            "name":"Hellen Quesada",
            "role":"Principal Software Engineer"
         },
         {
            "id":"11",
            "name":"Jonathan Chavez",
            "role":"Principal Creative Engineer"
         }
      ]
   },
   {
      "consumer":[
         {
            "id":"18",
            "name":"Helga Martinez",
            "role":"Production Manager"
         },
         {
            "id":"19",
            "name":"Leroy Bernard",
            "role":"Sr. Software Engineer"
         }
      ]
   }
]

但是我现在需要渲染的只是数据的企业部分，这就是为什么在我的函数中我要执行

iterateObj[0]。企业

但是我还没有在DOM中得到任何东西，我如何在对象上正确地迭代以获得我需要的数据的渲染

---

我缺少什么？

模板需要是脚本而不是html。不过，脚本可以包含所需的html

<script id="foo" type="text/x-handlebars-template">
<div class="chart-container" data-action="chartContainer">
    <ul>
        <li class="department">
            <h3>Enterprise</h3>
            <ul class="sections">
                //Not really sure what you want here
                //But access the data like this
                <li>{{enterprise.id}}</li>
            </ul>
        </li>
    </ul>
</div>
</script>

---

最后，我强烈建议大家阅读这本书。有很多方法可以循环和访问数据。上面的模板非常基本。

$。getJSON

是异步的。。。在返回响应之前，无法使用该响应。需要在callback@charlietfl问题是：如何从JavaScript创建模板，然后从html调用它？

<script id="foo" type="text/x-handlebars-template">
<div class="chart-container" data-action="chartContainer">
    <ul>
        <li class="department">
            <h3>Enterprise</h3>
            <ul class="sections">
                //Not really sure what you want here
                //But access the data like this
                <li>{{enterprise.id}}</li>
            </ul>
        </li>
    </ul>
</div>
</script>

//var chartContainerTemplate = $(".chart-container").html();    
//rename the script to a better id
var chartContainerTemplate = $("#foo").html();