Сложный вопрос шаблона jQuery - PullRequest
Новая
       4

Сложный вопрос шаблона jQuery

1 голос
/ 22 апреля 2011

Допустим, у меня есть такой шаблон 

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

1 Ответ

1 голос
/ 22 апреля 2011

Самое простое, что нужно сделать - передать 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") );
...