Question

我有一个像这样的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的模板插件结婚，所以如果有人知道更好的插件，请随意提出另一个插件。

Answer 1

我实际上不喜欢我的_index 对象

好消息！你实际上并不需要它。要使this excellent question and answer适应您的问题，您需要做一些事情来找到您渲染的当前项目的索引：

将options参数中的函数添加到.tmpl()，可用于检索当前项的索引：

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

修改模板以使用该功能：

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

Answer 2

您无需在_index中“模板化”{{if}}属性。你可以写

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

jQuery模板中的条件

2 个答案: