cómo usar vkTemplate para completar html con un objeto JSON

Quiero poder tomar un objeto json proporcionado por php y ponerlo en html. Mi antiguo método de hacer una cadena de html increíblemente larga e incomprensible y luego hacer $.append(hmltStr) no me fue tan bien la última vez que lo publiqué en SO. Me pregunto si alguien puede explicarme cómo poner un objeto json en html usando Esta plantilla que aparentemente es una mejora de la Microplantilla de John Resign.

Dado el objeto:

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

}

es la data siendo recopilado por esta solicitud de ajax, ¿cómo puedo completar una tabla html con ella en la parte de éxito de esta función de 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>

Además, ¿cuál es el <script type="html/javascript></script> etiqueta. Esto puede ser relevante o no, pero lo he visto en las plantillas; necesito usar eso?

Gracias por la ayuda!

preguntado el 22 de mayo de 12 a las 18:05

1 Respuestas

HTML

una. incluya el script jQuery, algo como esto:

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

B. incluya el complemento vkTemplate, algo como esto:

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

C. en su página html, agregue un elemento que desee inyectar en esta tabla, por ejemplo:

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

PLANTILLA

(tenga en cuenta que line_item es una matriz, por lo que debe ordenar y line_item de manera diferente)

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

guarde esta plantilla (por ejemplo como orden.tmpl ) en su servidor web

DESARROLLADOR

inicialice el complemento vkTemplate y proporcione la URL de plantilla como primer parámetro y la URL de json_data como segundo parámetro

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

En este punto ya has terminado.

Espero que ayude

-vadim

contestado el 24 de mayo de 12 a las 06:05

Hola Vadim, gracias. Eso es increíblemente útil. ¿Puedo hacer javascript normal dentro del archivo de plantilla? <% var contents = shipment[i].package_contents; var tracking_number = shipment[i].tracking_number; var name = shipment[i].ship_name; if (contents){%> <%=contents%>; <%}%> ¿por ejemplo? Gracias - 1252748

Sí tu puedes. Puede usar javascript normal y manipular con el objeto dentro de la plantilla. En realidad, puede considerar <% ... %> como un cierre. - vadimk

correcto, pero parece que algún javascript no funciona dentro de él. por ejemplo esto, <% if ( o.shipment ) } %> <span>test</span> <% } %> me da el error en la consola de chrome Uncaught SyntaxError: Unexpected identifier vktemplate.js line 66 y en esa linea esta return new Function("o", fn); alguna idea de que se trata esto? Gracias - 1252748

hay un error de sintaxis en su ejemplo: el primer corchete debe ser '{' - vadimk

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.