如何在Shopify商店中使用handlebars.js遍历JSON数组？

debugcn 发表于 Dev

工具

我正在向发出GET请求/cart.js。它返回以下JSON数据：

{
   "token":"118aa66ff7cc99c7fb4524f07bd305a4",
   "note":null,
   "attributes":{

   },
   "total_price":771,
   "total_weight":0,
   "item_count":3,
   "items":[
      {
         "id":903858951,
         "title":"Aarts Frambozen op siroop",
         "price":211,
         "line_price":211,
         "quantity":1,
         "sku":"wi195688",
         "grams":0,
         "vendor":"Aarts",
         "properties":null,
         "product_id":385866167,
         "variant_id":903858951,
         "gift_card":false,
         "url":"/products/aarts-frambozen-op-siroop?variant=903858951",
         "image":"https://cdn.shopify.com/s/files/1/0656/8697/products/AHI_434d50303234343731_dRevLabel_1_Rendition_LowRes_JPG.jpeg?v=1413443204",
         "handle":"aarts-frambozen-op-siroop",
         "requires_shipping":true
      },
      {
         "id":903852739,
         "title":"AH Aardappelschijfjes spek en ui",
         "price":211,
         "line_price":211,
         "quantity":1,
         "sku":"wi202676",
         "grams":0,
         "vendor":"AH",
         "properties":null,
         "product_id":385862935,
         "variant_id":903852739,
         "gift_card":false,
         "url":"/products/ah-aardappelschijfjes-spek-en-ui?variant=903852739",
         "image":"https://cdn.shopify.com/s/files/1/0656/8697/products/AHI_434d50303038363632_dRevLabel_2_Rendition_LowRes_JPG.jpeg?v=1413442904",
         "handle":"ah-aardappelschijfjes-spek-en-ui",
         "requires_shipping":true
      },
      {
         "id":903852571,
         "title":"AH Aardappelen iets kruimig voordeelzak",
         "price":349,
         "line_price":349,
         "quantity":1,
         "sku":"wi127728",
         "grams":0,
         "vendor":"AH",
         "properties":null,
         "product_id":385862819,
         "variant_id":903852571,
         "gift_card":false,
         "url":"/products/ah-aardappelen-iets-kruimig-voordeelzak?variant=903852571",
         "image":"https://cdn.shopify.com/s/files/1/0656/8697/products/AHI_434d50303233343335_dRevLabel_1_Rendition_LowRes_JPG.jpeg?v=1413442897",
         "handle":"ah-aardappelen-iets-kruimig-voordeelzak",
         "requires_shipping":true
      }
   ],
   "requires_shipping":true
}

我想要做的就是迭代通过items并显示id，title和quantity。

这是我正在尝试的方法：

<script class="foobar" charset="utf-8" type="text/x-handlebars-template">
  <div>
    {{#items}}
      <thead>
        <th>Id</th>
        <th>Title</th>
        <th>Qty</th>
      </thead>
      <tbody>
        <tr>
          <td>{{id}}</td>
          <td>{{title}}</td>
          <td>{{quantity}}</td>
        </tr>
      </tbody>
    {{/items}}
  </div>
</script>

<script charset="utf-8">
  var source = $(".foobar").html();
  var template = Handlebars.compile(source);

  var jqxhr = $.getJSON( "/cart.js", function() {
    console.log( "success" );
  })

  $('body').append(template(jqxhr.responseJSON));
</script>

但这返回：

Id Title Qty

没有任何数据。我知道GET请求正在工作，因为会console.log(jqxhr.responseJSON);打印正确的数据。

我做错了什么，接下来我可以尝试什么？

编辑：

我认为我错误地处理了Ajax响应。

JSFiddle：http : //jsfiddle.net/narzero/4fn3f6sg

编辑2：

值得一提的是，我正在Shopify商店上运行代码。

工具

我通过{% raw %} {% endraw %}在handlebar脚本类中添加标签来解决此问题，如下所示：

<script class="foobar" type="text/x-handlebars-template">
  {% raw %}
    <div>
        <thead>
          <th>Id</th>
          <th>Title</th>
          <th>Qty</th>
        </thead>
        <tbody>
        {{#items}}
          <tr>
            <td>{{id}}</td>
            <td>{{title}}</td>
            <td>{{quantity}}</td>
          </tr>
        </tbody>
        {{/items}}
    </div>
  {% endraw %}
</script>