3

I have a jquery template setup like this:

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

And the data I'm sending looks something like this:

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

All That is working great. My question is that if there is a way to put a conditional in there. I know about the {{if}} and such as stated in the docs but I'm wondering if you can do something like this:

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

I tried that and it didn't work. I actually don't like the _index in my object but I thought I'd give that a change. I'm thinking the current index is passed into the loop for the template but I have no idea.

I'm not married to jQuery's templating plugin so if someone knows a better plugin please feel free to suggest another one.

Andrew Whitaker
  • 124,656
  • 32
  • 289
  • 307
locrizak
  • 12,192
  • 12
  • 60
  • 80

2 Answers2

2

I actually don't like the _index in my object

Good news! You don't actually need it. Adapting this excellent question and answer to your problem, you need to do a few things to make finding the index of the current item you're rendering easier:

  1. Add a function in the options parameter to .tmpl() that you can use to retrieve the index of the current item: 

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

  2. Modify your template to make use of that function:

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

Here's a simplified working sample: http://jsfiddle.net/gsd6D/

Community
  • 1
  • 1
Andrew Whitaker
  • 124,656
  • 32
  • 289
  • 307
  • Siiiick, I actually just read that in the docs which I should have done in the first place. Just what I was looking for nice and clean, thanks – locrizak Jun 30 '11 at 03:29
0

You don't have to "templatize" the _index property in the {{if}}. You can just write 

{{if (_index + 1) % 5 == 0}} class='last_search_video' {{/if}}
jmbucknall
  • 2,061
  • 13
  • 14
  • That doesn't work. Why would it though because _index value will not be found. – locrizak Jun 30 '11 at 00:39
  • @locrizak: well I am assuming that you are putting it into your template where _index will be defined and come from your data at run-time. – jmbucknall Jun 30 '11 at 00:58
  • Correct but im assuming that if you want to use something from your data you need to call it with the ${} so the regex can pick it up. I did try it but no luck. do you have any other ideas? – locrizak Jun 30 '11 at 01:09
  • Sorry I see what you were saying now but like I said it still didn't work. Thanks for your input – locrizak Jun 30 '11 at 03:30