Jsons把手阵列

Question

我正在尝试渲染json数组，如下所示：

 var model = [
    {
      color: 'Red',
      bricks: [
        { size: '2 x 2', quantity: 15 },
        { size: '1 x 3', quantity: 17 }
      ],
      onSale: false
    },
    {
      color: 'Blue',
      bricks: [
        { size: '1 x 8', quantity: 21 },
        { size: '2 x 8', quantity: 52 },
        { size: '4 x 3', quantity: 33 },
        { size: '3 x 6', quantity: 16 }
      ],
      onSale: false
    },
    {
      color: 'Green',
      bricks: [
        { size: '1 x 1', quantity: 13 },
        { size: '2 x 4', quantity: 36 },
        { size: '2 x 6', quantity: 28 }
      ],
      onSale: true
    }

];

var source = document.getElementById('temp-quiz').innerHTML;
var template = Handlebars.compile(source);
var wrapper  = {objects: model};
var html = template(wrapper);
document.getElementById('div-quiz').innerHTML += html ;

以上代码包装在window.onload = function（）{}）中；我的index.html如下：

   <div id="div-quiz"><h2>HBS Quiz</h2></div>
    <script id ="temp-quiz" type="text/x-handlebars-template">
      {{#each model as |item|}}
            <section class="row color-group {{item.color}}-bricks">
              <h2>{{item.color}}</h2>
              {{#each item.bricks as |brick|}}
                <div class="col-sm-4 well {{if item.onSale 'on-sale' ''}}">
                  <p class="brick-size">Size: {{brick.size}}</p>
                  <p class="brick-quantity">Quantity: {{brick.quantity}}</p>
                </div>
              {{/each}}
            </section>
          {{/each}}

    </script>

<script src="script/cdnjs.cloudflare.com_ajax_libs_handlebars.js_4.0.12_handlebars.min.js"

     

type =“ text / javascript”>                      ->           

我尝试了this，但对于我来说似乎不起作用。

我在控制台中没有收到任何错误消息。任何帮助将不胜感激。