如何使用 Handlebars 和 jQuery 渲染数据

How to render data with Handlebars and jQuery

本文关键字：数据 jQuery 何使用 Handlebars 更新时间：2023-09-26

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

默认.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>

这是代码

APP.chartContainer = (function () {
    var Handlebars = window.Handlebars;
    var bindEventsToUI = function () {
    $.getJSON('maindata.json')
        .done(function(data) {
            localStorage.setItem('jsonData', JSON.stringify(data));
        }).fail(function(err) {
            console.log(err);
        });
        var chartContainerTemplate = $(".chart-container").html();
        var theTemplate = Handlebars.compile(chartContainerTemplate);
        var getData = localStorage.getItem('jsonData');
        var iterateObj = $.each(JSON.parse(getData), function(key, val) {
            return val;
        });
        var theCompiledHtml = theTemplate(iterateObj[0].enterprise);
        $(".sections").append(theCompiledHtml);
    };
    var init = function (element) {
        bindEventsToUI();
    };
    /**
     * interfaces to public functions
     */
    return {
        init: init
    };
}());

函数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].enterprise但我还没有在 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>

然后编译模板（即脚本）：

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

最后，我强烈建议阅读文档。有多种循环和访问数据的方法。上面的模板是非常基本的。