JSRender/JSView repeat all template when I use for loop

Question

I have an array with this format:

{[
{ title : "", artist : "" },
{ title : "", artist : "" },
{ title : "", artist : "" },
{ title : "", artist : "" }
]}

When I try print the data, I get the full template n times (Json data lenght). I have:

var list = new Array();
list.push({ title : **data**, artist : **data** });
var songsTemplate = $.templates("#topSongsTemplate");
var html = songsTemplate.render(list);
$("#topSongs").html(html);

I only want the for of my template repeats. But I get the full template all times repeated across my div. I am missing something?:

<script type="text/x-jsrender" id="topSongsTemplate">
    <div class="col-md-6">
        <i class="fa fa-trophy"></i> <span data-i18n="search.top_tracks">Top 20 Tracks</span>
        <div class="separator hr-line-dashed m-t-xs"></div>
        <ol>
            {{for ~root }}
                <li>{{>title}} - <small>{{>artist}}</small></li>
            {{/for}}
        </ol>
    </div>
    </script>

Answer 1

To render without iteration you can write:

var html = songsTemplate.render(list, true);

See Passing an array to render(), but without iteration. in this documentation topic.

BTW then you can equally write {{for}} or {{for #data}} - though {{for ~root}} will also work.

Also take a look at this answer to a similar question.