Question

我有这个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>

这是代码

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中获得任何东西，我该如何正确迭代在对象上方以获取我需要的数据的呈现？

我错过了什么？

Answer 1

模板需要是一个脚本而不是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();

最后，我强烈建议您阅读docs。有循环和访问数据的方法。以上模板非常基础。

如何使用Handlebars和jQuery

1 个答案: