如何通過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>