用handlebar.js循环

时间:2015-08-25 04:43:03

标签: javascript handlebars.js

嗨,我有以下问题。我试图遍历每一章以输出一节经文,但没有显示任何内容。

<div class="content-placeholder"></div>

<script id="built-in-helpers-template" type="text/x-handlebars-template">
   {{#each chapter}}
    <ol>
        <li> {{ verse}}</li>
    </ol>
  {{/each}}
</script>

<script type="text/javascript">

$(function () {

  // Grab the template script
  var theTemplateScript = $("#built-in-helpers-template").html();

  // Compile the template
  var theTemplate = Handlebars.compile(theTemplateScript);

  // We will call this template on an array of objects
  var content = "";
  jQuery.ajax({
    url:'https://getbible.net/json',
    dataType: 'jsonp',
    data: 'p=John1&v=kjv',
    jsonp: 'getbible',
    success:function(json){
        content = json;
        console.log(content);
    },
  });

  // Pass our data to the template
  var theCompiledHtml = theTemplate(content);

  // Add the compiled html to the page
  $('.content-placeholder').html(theCompiledHtml);

});

</script>

jsfiddle(https://jsfiddle.net/gdiamond/v8dnn35j/1/

1 个答案:

答案 0 :(得分:1)

由于ajax调用尚未完成,您正在使用尚未填充的内容呈现模板。将theCompiledHtml计算和结果分配到content-placeholder回调中{/ 1}}。