艱難jQuery的模板問題

Question

比方說，我有這樣的

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

模板顯然，我們結合的集合，並且每個條目，將創建一個行。現在我無法得到的是引用被綁定的「數據」的實例，但必須伸入全局「viewModel」變量。我想獲取綁定數據的實例，並獲取屬性「EditUrl」（本身具有模板文本）。那我該怎麼做？

完整的例子（我也使用knockout.js，但問題不是它） 問題是，我將一個「Dtos」列表綁定到一行。但是EditUrl和CreateUrl不在Dtos上，而是在包含Dtos（父項）的對象上。

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

要做的最簡單的事情就是通過viewModel或通過「options」參數傳遞給jQuery模板的變量。

我想到你在這裏使用淘汰賽，所以你可以做的是一樣的東西：

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

然後，在你的模板，你可以在該行模板訪問這些屬性，如：

$item.edit和$item.details（或任何你想要調用你的屬性）。

如果你不使用淘汰賽，那麼你可以通過選項爲$.tmpl，如：

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