Как вызвать функции во вложенных тегах {{tmpl}} в шаблонах jquery? - PullRequest
Новая
       17

Как вызвать функции во вложенных тегах {{tmpl}} в шаблонах jquery?

9 голосов
/ 25 марта 2011

Это простой пример, основанный на коде в документации по API jquery-tmpl.Я хотел бы использовать вложенный тег {{tmpl}} - здесь «titleTemplate».Я хотел бы использовать различные вспомогательные функции как во внешнем шаблоне, так и во вложенном шаблоне.В этом примере есть одна тривиальная вспомогательная функция под названием «embolden», которая передается начальному вызову tmpl ().

Следующие работы.Я могу подбросить данные Name внутри titleTemplate.Но это кажется грязным.Есть ли более чистый способ сделать это?Поскольку formatHelpers передается в исходный вызов tmpl (), действительно ли необходимо также передавать его в тег {{tmpl}}?

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
    {{tmpl($item.data, formatHelpers) "#titleTemplate"}}
    <tr class="detail"><td>Director: ${$item.embolden(Director)}</td></tr>
</script>

<script id="titleTemplate" type="text/x-jquery-tmpl"> 
    <tr class="title"><td>${$item.embolden($item.data.Name)}</td></tr>
</script>

<table><tbody id="movieList"></tbody></table>

<script>
var formatHelpers = { 
    embolden: function(i) {
        return "*" + i + "*";
    }
};

var movies = [
    { Name: "The Red Violin", Director: "François Girard" },
    { Name: "Eyes Wide Shut", Director: "Stanley Kubrick" },
    { Name: "The Inheritance", Director: "Mauro Bolognini" }
];

/* Render the template with the movies data */
$( "#movieTemplate").tmpl(movies, formatHelpers).appendTo("#movieList");
</script>

1 Ответ

12 голосов
/ 25 марта 2011

На вашем примере все, что вам нужно сделать, это 

{{tmpl($item.data, $item) "#titleTemplate"}}

Пример кода на jsfiddle .

Еще один способ сделать этоэто для того, чтобы определить ваш formatHelpers в глобальной области видимости, вы должны иметь возможность вызывать их прямо в вашем шаблоне. 

var formatHelpers = { 
    embolden: function(i) {
        return "*" + i + "*";
    }
};
$(function() {
    var movies = [
        {
        Name: "The Red Violin",
        Director: "François Girard"},
    {
        Name: "Eyes Wide Shut",
        Director: "Stanley Kubrick"},
    {
        Name: "The Inheritance",
        Director: "Mauro Bolognini"}
    ];

    $("#movieTemplate").tmpl(movies).appendTo("#movieList");
});

А внутри вашего шаблона вы можете делать следующее: 

<script id="movieTemplate" type="text/x-jquery-tmpl"> 
    {{tmpl($item.data) "#titleTemplate"}}
    <tr class="detail"><td>Director: ${formatHelpers.embolden(Director)}</td></tr>
</script>

<script id="titleTemplate" type="text/x-jquery-tmpl"> 
    <tr class="title"><td>${formatHelpers.embolden(Name)}</td></tr>
</script>

Пример кода для jsfiddle .

...