JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script id='tmpl-video_list' type='text/x-jquery-tmpl'>
    <li {{if $item.getIndex($item.data) === 0 }} class='test'
        {{/if}}> 

        <a href='${url}'><br/>
            <span class='image_border'>
                <span class='image_container'>
                    <img src='${thumb}' alt='' title='' />
                </span>
            </span>
        </a>
        <span>${$item.getIndex($item.data)}</span>
        <div class='search_block'>
            <span class='name'>${caster_name}</span>
            <a href='${url}'>
                <span class='search_title'>${title}</span>
            </a>
        </div>
    </li>
</script>

<ul></ul>

CSS

.test { background-color: yellow; }

JavaScript

var data = [{
    url: 'http://www.google.com',
    thumb: 'test',
    name: 'Google',
    title: 'google'
},
{
    url: 'http://www.stackoverflow.com',
    thumb: 'StackOverflow',
    name: 'StackOverflow',
    title: 'stackoverflow'
}];

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