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

Это простой пример, основанный на коде из документации 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>

jquery jquery-templates
person heyotwell    schedule 25.03.2011    source источник

Ответы (1)


arrow_upward
12
arrow_downward

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

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

person Mark Coleman    schedule 25.03.2011
comment
Спасибо! Первое решение — это то, что я искал, поскольку оно позволяет мне писать функции в formatHelpers, где «это» относится к текущему элементу tmplItem. - person heyotwell; 26.03.2011