如何使用 vkTemplate 用 JSON 对象填充 html答案

【问题标题】：how to use vkTemplate to populate html with JSON object如何使用 vkTemplate 用 JSON 对象填充 html
【发布时间】：2012-05-22 17:12:13
【问题描述】：

我希望能够获取 php 提供的 json 对象并将其放入 html 中。我的旧方法只是制作一个令人难以置信的长、难以理解的 html 字符串，然后执行 $.append(hmltStr) 在我最后一次在 SO 上发布它时并没有那么好。我想知道是否有人可以向我解释如何使用 this template 将 json 对象放入 html 中，这显然是对 John Resign micro-template 的改进。

给定对象：

{
"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> 标签是什么。这可能相关也可能不相关，但我在模板中看到了它；我需要使用它吗？

感谢您的帮助！

【问题讨论】：

标签： javascript jquery json jquery-templates

【解决方案1】：

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）

JAVASCRIPT

初始化vkTemplate插件并提供模板URL作为第一个参数，json_data URL作为第二个参数

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

到此你就完成了。

希望有帮助

-瓦迪姆

【讨论】：

嗨瓦迪姆，谢谢。这非常有帮助。我可以在模板文件中执行普通的 javascript 吗？ <% var contents = shipment[i].package_contents; var tracking_number = shipment[i].tracking_number; var name = shipment[i].ship_name; if (contents){%> <%=contents%>; <%}%> 例如？谢谢
是的，你可以。您可以使用常规 javascript 并使用模板中的对象进行操作。实际上，您可以将视为闭包。
对，但似乎有些 javascript 在其中不起作用。例如，<% if ( o.shipment ) } %> <span>test</span> <% } %> 给了我 chrome 控制台中的错误Uncaught SyntaxError: Unexpected identifier vktemplate.js line 66 并且在那一行是return new Function("o", fn); 有什么想法吗？谢谢
你的例子有语法错误：第一个大括号必须是'{'