Define the JQuery Template for the Table Rows
Next, we need to define a JQuery template that will generate the HTML for each table row based on the results of the mashable. First, we need to see the structure of the results.
You can open the artifact page for Yahoo local Search and run the mashable to see the results in a tree from the Preview tab. This example uses a query for bank in the 94102 ZIP code (downtown San Francisco) with a total number of results of 20.
As the tree view shows, the results for Yahoo local Search have a repeating Result item that contains the fields to include in the table.
Note: | If you need to see the results in JSON format, you can open the Technical Spec tab and click on the URL. Change the x-presto-resultFormat parameter to XML to see results in XML format. |
The JQuery templating syntax to map data from an array of objects is ${property-name}, so the template simply needs to contain the appropriate HTML tags for one row combined with this property mapping syntax, such as this:
Presto.namespace("Sample");
Sample.SimpleTable = function( app ) {
var rootDiv = jQuery(app.getRootElement);
var myTbl = rootDiv.find('.myTable');
var connection = app.getConnection();
var rowMarkup = "<tr><td>${Title}</td><td>${Address}</td><td>${City}</td> <td>${Phone}</td><td>${Distance}</td><td>${BusinessUrl}</td></tr>"
jQuery.template("rowTemplate", rowMarkup);
};
The jQuery.template() function compiles the template with rowTemplate as its name.
