Условные выражения в шаблонах jQuery - PullRequest
Новая
       9

Условные выражения в шаблонах jQuery

3 голосов
/ 30 июня 2011

У меня есть настройка шаблона jquery, как это: 

<script id='tmpl-video_list' type='text/x-jquery-tmpl'>
<li>
    <a href='${url}'><br/>
        <span class='image_border'>
            <span class='image_container'>
                <img src='${thumb}' alt='' title='' />
            </span>
        </span>
    </a>
    <div class='search_block'>
        <span class='name'>${caster_name}</span>
            <a href='${url}'>
                <span class='search_title'>${title}</span>
            </a>
    </div>
</li>

И данные, которые я отправляю, выглядят примерно так: 

{
    _index:i,
    url: url,
    thumb: thumb,
    name: name,
    title: title
}

Все это прекрасно работает. Мой вопрос заключается в том, что если есть способ поставить условное обозначение там. Я знаю о {{if}} и ​​о том, что указано в документации, но мне интересно, можете ли вы сделать что-то вроде этого: 

{{if ${_index}+1 % 5 == 0}} class='last_search_video' {{/if}}

Я попробовал это, и это не сработало. Мне на самом деле не нравится _index в моем объекте, но я решил изменить это. Я думаю, что текущий индекс передается в цикл для шаблона, но я понятия не имею.

Я не женат на шаблонном плагине jQuery, поэтому, если кто-то знает лучший плагин, пожалуйста, не стесняйтесь предлагать другой.

Ответы [ 2 ]

2 голосов
/ 30 июня 2011

Мне на самом деле не нравится _индекс в моем объект

Хорошие новости! Тебе это не нужно. Адаптируя этот отличный вопрос и ответ к вашей проблеме, вам нужно сделать несколько вещей, чтобы упростить поиск индекса текущего элемента, который вы рендерили:

  1. Добавьте функцию в параметре options к .tmpl(), которую можно использовать для получения индекса текущего элемента: 

    $("#tmpl-video_list").tmpl(data, {
    getIndex: function(item) {
        return $.inArray(item, data);
    } 
});

  2. Измените шаблон, чтобы использовать эту функцию: 

    <script id='tmpl-video_list' type='text/x-jquery-tmpl'>
    <li {{if $item.getIndex($item.data) + 1 % 5 === 0 }} class='last_search_video' {{/if}}>
        <!-- etc., etc., -->
    </li>
</script>

Вот упрощенный рабочий пример: http://jsfiddle.net/gsd6D/

0 голосов
/ 30 июня 2011

Вам не нужно «шаблонизировать» свойство _index в {{if}}. Вы можете просто написать 

{{if (_index + 1) % 5 == 0}} class='last_search_video' {{/if}}
...