如何通过Shopify商店中的handlebars.js循环使用JSON数组？

Question

我正在向/cart.js发出GET请求。它返回以下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商店代码。

Answer 1

我通过添加标签{% raw %}{% endraw %}车把脚本类中，像这样解决了这个问题：

<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> 

当使用{% raw %}它确保没有液体将这些标签内被解析。

感谢您的帮助球员。

Answer 2

你循环你提供的数据的方式应该可以工作，但是我发现ajax调用的一个小错误实际上会让你认为你的代码不工作。

由于您使用的是ajax，而且ajax是异步的，所以您必须在代码的完整回调中返回结果。

$.getJSON("/cart.js", function(data) { 
    $('body').append(template(data)); 
}); 

我不确定这是否有意故障，但是您的表是不完整的。

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