如何使用vkTemplate填充JSON對象的html

我想能夠採取一個php提供的json對象並將其放入html中。我剛纔製作一個令人難以置信的長html的字符串，然後做$.append(hmltStr)的舊方法在我最後一次在SO上發佈它的時候並沒有做得很好。我想知道是否有人可以向我解釋如何使用this template將json對象轉換爲html，這顯然是John Resign micro-template的改進。如何使用vkTemplate填充JSON對象的html

考慮對象：

{ 
"order": { 
    "name": "TRADEMARK WHEEL COMPANY", 
    "sales_order_id": "18278", 
    "order_date": "05 \u2044 15 \u2044 2012", 
    "due_date": "05 \u2044 21 \u2044 2012", 
    "order_number": "1213140", 
    "reference": "21192D\/35546", 
    "order_description": "BICICLETTE", 
    "ship_name": "ADAMS", 
    "ship_address1": "1919 W RANDOLPH ST.", 
    "ship_address2": "", 
    "ship_city": "CHICAGO", 
    "ship_state": "IL", 
    "ship_postal_code": "60606", 
    "ship_country": null, 
    "ship_via": "FEDEX GROUND", 
    "tracking_number": null, 
    "package_contents": null, 
    "freight": "0.00", 
    "taxable": "0.00", 
    "nontaxable": "748.88", 
    "sales_tax": "0.00" 
}, 
"line_item": [{ 
    "description": "RED ONE", 
    "quantity": "2.00", 
    "sell_price": "349.44" 
}, 
{ 
    "description": "FRONT GEAR", 
    "quantity": "2.00", 
    "sell_price": "15.00" 
}, 
{ 
    "description": "5th GEAR", 
    "quantity": "2.00", 
    "sell_price": "10.00" 
}]

}

是這個Ajax請求所收集的data，我怎麼能在這個AJAX功能的成功部分填充一個HTML表格與它

$.ajax({ 
    type: "POST", 
    url: "getJSON.php", 
    data: submitStr, 
    success: function (data) { 

    //populate order details 

    //loop through variable number of line items 

} 

<html> 

<table id="contentTable"> 
</table> 

</html>

另外，什麼是<script type="html/javascript></script>標籤。這可能也可能不相關，但我已經在模板中看到它;我需要使用它嗎？

感謝您的幫助！

來源

2012-05-22 1252748

HTML

一個。包括jQuery腳本，如下所示：

<script src=".../libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

b。包括vkTemplate插件，如下所示：

<script src="vktemplate.js" type="text/javascript"></script>

c。在HTML頁面中添加要注入該表中的元素，例如：

<div id="container"></div>

模板

（注，即LINE_ITEM是數組，所以你要訂購和LINE_ITEM不同）

<table id="contentTable"> 
    <tr> 
     <td> 
      label-one: 
     </td> 
     <td> 
      <%= o.order.name %> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      label-two: 
     </td> 
     <td> 
      <%= o.line_item[0].description %> 
     </td> 
    </tr> 
</table>

保存此模板（例如爲order.tmpl）在Web服務器上

JAVASCRIPT

初始化vkTemplate插件和模板提供URL作爲第一個參數，並json_data URL作爲第二個參數

$('#container').vkTemplate('order.tmpl', 'getJSON.php');

在這一點上，你就大功告成了。

希望幫助

-Vadim

來源

2012-05-24 05:41:07 vadimk

嗨瓦迪姆，謝謝。這非常有幫助。我可以在模板文件中做正常的JavaScript嗎？ '<％var contents = shipment [i] .package_contents; var tracking_number = shipment [i] .tracking_number; var name = shipment [i] .ship_name;如果（內容）{％><%=contents%>; <%}%>'例如？謝謝 – 1252748

是的，你可以。您可以使用常規JavaScript並在模板內使用對象進行操作。其實，你可以考慮將<% ... %>作爲封閉。 – vadimk

沒錯，但似乎有些JavaScript不起作用。例如這個，'<％if（o.shipment）}％> test<% } %>'給我錯誤在chrome控制檯'未捕獲的SyntaxError：意外的標識符vktemplate.js行66'並且在那行是'return new Function （「o」，fn）;「任何想法是什麼？謝謝 – 1252748

如何使用vkTemplate填充JSON對象的html

回答

相關問題