Как использовать vkTemplate для заполнения HTML с JSON-объектом

Я хочу иметь возможность взять предоставленный php json-объект и поместить его в html. Мой старый метод - просто сделать одну невероятно длинную, непонятную строку html и затем сделать $.append(hmltStr) Не очень хорошо, когда я в последний раз опубликовал об этом на SO. Интересно, может ли кто-нибудь объяснить мне, как поместить объект json в html, используя этот шаблон, который, очевидно, является улучшением микротаблета John Resign.

Учитывая объект:

{
"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"
}]

}

это data собираясь этим запросом ajax, как я могу заполнить html-таблицу ею в успешной части этой функции ajax

$.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> тег. Это может или не может иметь значение, но я видел это в шаблонах; мне нужно использовать это?

Спасибо за помощь!

Источник

1 ответ

Решение

HTML

а. включите скрипт jQuery, что-то вроде этого:

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

б. включите плагин vkTemplate, что-то вроде этого:

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

с. на вашей 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-адрес шаблона в качестве первого параметра, а URL-адрес json_data - в качестве второго параметра

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

На данный момент вы сделали.

надеюсь, это поможет

-Vadim

Источник
Другие вопросы по тегам