如何渲染把手和jQuery

我有这个网站，我需要呈现数据如何渲染把手和jQuery

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中获取任何东西，但是如何正确地遍历对象为了获得我需要的数据的渲染？

我错过了什么？

来源

2016-03-03 NietzscheProgrammer

'$ .getJSON'是异步的...在返回之前不能使用响应。需要在回调中使用该数据 – charlietfl

@charlietfl事情是：我如何从JavaScript创建模板，然后从HTML中调用它？ – NietzscheProgrammer

模板需要是一个不是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。有循环和访问数据的方法。以上模板非常基本。

来源

2016-03-04 15:42:35 nerdlyist

如何渲染把手和jQuery

回答

相关问题