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模板。

我在想你在这里使用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") );

艰难的jQuery模板问题

1 个答案: