title: Tough jQuery template question
body: <p>Let's say I have a template like this</p>
  
  <pre><code>&lt;script id="rowTemplate" type="text/x-jquery-tmpl"&gt;
      &lt;tr&gt;
          &lt;a href="${ $.tmpl(viewModel.EditUrl, $data).text() }"&gt;Edit &lt;/a&gt;
          &amp;nbsp;&amp;nbsp;
          &lt;a href="${ $.tmpl(viewModel.DetailsUrl, $data).text() }"&gt;Details&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;${Id}&lt;/td&gt;
          &lt;td&gt;${Number}&lt;/td&gt;
          &lt;td&gt;${Description}&lt;/td&gt;
          &lt;td&gt;${Total}&lt;/td&gt;
          &lt;td&gt;&lt;input type='image' src="/images/delete.gif" alt="delete" data-bind="click: function() { processCommand({name:'Delete', Data: this, IsAjax:false}) }"&gt;&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>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?</p>
  
  <p>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).</p>
  
  <pre><code>   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}"});
  
  &lt;div data-bind='template: {name: "contentTemplate"}' /&gt;
  
  &lt;script id="contentTemplate" type="text/x-jquery-tmpl"&gt;
      {{tmpl contentHeaderTemplate}}
      &lt;div data-bind='template: {name: "tableTemplate"}'&gt;&lt;/div&gt;
      &lt;br /&gt;
  &lt;/script&gt;
  
  &lt;script id="contentHeaderTemplate" type="text/x-jquery-tmpl"&gt;
  &lt;h2&gt;
      Orders&lt;/h2&gt;
  &lt;a href="${CreateUrl}"&gt;
      Create New Order&lt;/a&gt;
  &lt;br /&gt;
  &lt;br /&gt;
  &lt;/script&gt;
  
  &lt;script id="tableTemplate" type="text/x-jquery-tmpl"&gt;
      &lt;table class="gridview" cellspacing="0" rules="all" border="1"&gt;
  
          &lt;tbody data-bind='template: {name:"rowTemplate", foreach:Dtos}'&gt;&lt;/tbody&gt;
  
      &lt;/table&gt;
  &lt;/script&gt;
  
  &lt;script id="rowTemplate" type="text/x-jquery-tmpl"&gt;
      &lt;tr&gt;
      //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.
          &lt;td&gt;&lt;a href="${ $.tmpl(viewModel.EditUrl, $data).text() }"&gt;Edit &lt;/a&gt;
          &amp;nbsp;&amp;nbsp;
          &lt;a href="${ $.tmpl(viewModel.DetailsUrl, $data).text() }"&gt;Details&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;${Id}&lt;/td&gt;
          &lt;td&gt;${Number}&lt;/td&gt;
          &lt;td&gt;${Description}&lt;/td&gt;
          &lt;td&gt;${Total}&lt;/td&gt;
          &lt;td&gt;&lt;input type='image' src="/images/delete.gif" alt="delete" data-bind="click: function() { processCommand({name:'Delete', Data: this, IsAjax:false}) }"&gt;&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/script&gt;
  
  &lt;script id="headerTemplate" type="text/x-jquery-tmpl"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;Id&lt;/th&gt;
              &lt;th&gt;Number&lt;/th&gt;
              &lt;th&gt;Description&lt;/th&gt;
              &lt;th&gt;Total&lt;/th&gt;
              &lt;th&gt;&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
  &lt;/script&gt;
  </code></pre>