棘手的 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

最简单的方法是通过“options”参数将 viewModel 或所需的变量传递给 jQuery 模板。

我认为您在这里使用 Knockout，所以您可以做的是：

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

然后，在您的模板中，您可以访问行模板中的这些属性，例如：

$item.edit 和 $item.details （或者任何你想调用你的属性的名称）。

如果您不使用 Knockout，那么您可以将选项传递到 $.tmpl 中，如下所示：

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