Tough jQuery template question

Question

Let's say I have a template like this

<script id="rowTemplate" type="text/x-jquery-tmpl">
    <tr>
        <a href="${ $.tmpl(viewModel.EditUrl, $data).text() }">Edit </a>
        &nbsp;&nbsp;
        <a href="${ $.tmpl(viewModel.DetailsUrl, $data).text() }">Details</a></td>
        <td>${Id}</td>
        <td>${Number}</td>
        <td>${Description}</td>
        <td>${Total}</td>
        <td><input type='image' src="/images/delete.gif" alt="delete" data-bind="click: function() { processCommand({name:'Delete', Data: this, IsAjax:false}) }"></a></td>
    </tr>
</script>

Obviously we are binding a collection and for each entry, a row is created. Now what I cannot get is to refer to the instance of the "data" being bound but have to reach into global "viewModel" variable. I would like to get the instance of the data being bound, and get the property "EditUrl" (which itself has a template text). So how do I do that?

Full example ( I use also knockout.js but the question is not about it) Problem is that I bind a list of "Dtos" to a rows. But EditUrl and CreateUrl are not on the Dtos, but on the object that contains Dtos ( a parent).

   var viewModel = ko.mapping.fromJS({"Dtos":[{"Id":0,
"Description":"some description",
"Number":0,"Total":0.0,
"Date":"\/Date(1303495442114-0500)\/"},
{"Id":1,"Description":"some description","Number":100,"Total":200.0,
"Date":"\/Date(1271959442114-0500)\/"},
{"Id":2,"Description":"some description","Number":200,"Total":400.0,
"Date":"\/Date(1240423442114-0500)\/"},"CreateUrl":"http://localhost:16555/TestOrderProcessingPage/tabid/63/ctl/OrderEdit/orderId/-1/Default.aspx",
"EditUrl":"http://localhost:16555/TestOrderProcessingPage/tabid/63/ctl/OrderEdit/mid/387/Default.aspx?orderId=${Id}",
"DetailsUrl":"http://localhost:16555/TestOrderProcessingPage/tabid/63/ctl/OrderDetails/mid/387/Default.aspx?orderId=${Id}"});

<div data-bind='template: {name: "contentTemplate"}' />

<script id="contentTemplate" type="text/x-jquery-tmpl">
    {{tmpl contentHeaderTemplate}}
    <div data-bind='template: {name: "tableTemplate"}'></div>
    <br />
</script>

<script id="contentHeaderTemplate" type="text/x-jquery-tmpl">
<h2>
    Orders</h2>
<a href="${CreateUrl}">
    Create New Order</a>
<br />
<br />
</script>

<script id="tableTemplate" type="text/x-jquery-tmpl">
    <table class="gridview" cellspacing="0" rules="all" border="1">

        <tbody data-bind='template: {name:"rowTemplate", foreach:Dtos}'></tbody>

    </table>
</script>

<script id="rowTemplate" type="text/x-jquery-tmpl">
    <tr>
    //this is problem "viewModel", there is not global viewModel variable any more, so the question is how to refer to data being bound to the row.
        <td><a href="${ $.tmpl(viewModel.EditUrl, $data).text() }">Edit </a>
        &nbsp;&nbsp;
        <a href="${ $.tmpl(viewModel.DetailsUrl, $data).text() }">Details</a></td>
        <td>${Id}</td>
        <td>${Number}</td>
        <td>${Description}</td>
        <td>${Total}</td>
        <td><input type='image' src="/images/delete.gif" alt="delete" data-bind="click: function() { processCommand({name:'Delete', Data: this, IsAjax:false}) }"></a></td>
    </tr>
</script>

<script id="headerTemplate" type="text/x-jquery-tmpl">
    <thead>
        <tr>
            <th></th>
            <th>Id</th>
            <th>Number</th>
            <th>Description</th>
            <th>Total</th>
            <th></th>
        </tr>
    </thead>
</script>

Answer 1

The easiest thing to do is pass in the the viewModel or the variables that you need in through the "options" parameter to jQuery templates.

I am thinking that you are using Knockout here, so what you can do is something like:

<table data-bind="template: { name: 'rowTemplate', foreach: myRows, templateOptions: { edit: EditUrl, details: DetailsUrl } }"></table>

Then, in your template you can access these properties in the row template like:

$item.edit and $item.details (or whatever you want to call your properties).

If you are not using Knockout, then you can pass options into $.tmpl like:

$( "#myTemplate" ).tmpl(yourData, { option1: value1, option2: value2 }).appendTo( "#target") );