Edit in JSFiddle

var viewModel = function() {
    var data = {
        players: [{
            name: 'Sachin Tendulkar',
            game: 'Cricket',
            description: '<b>Master Blaster</b>',
            likes: ["cricket", "seafood", "cars"],
            address: {
                city: 'Mumbai',
                country: 'India'
            }},
        {
            name: 'Roger Federer',
            game: 'Tennis',
            description: '<b>Fed Ex</b>',
            likes: [],
            address: {
                city: 'Basel',
                country: 'Switzerland'
            }},
        {
            name: 'Michael Jordan',
            game: 'BasketBall',
            description: '<b>His Airness</b>',
            likes: ["BasketBall", "golf", "haynes"],
            address: {
                city: 'Chicago',
                country: 'USA'
            }}]
    };

    var opHtml = ko.observable();

    var getPlayers = function() {
        opHtml($('#template').render(data));
    };

    var clearPlayers = function() {
        opHtml("");
    };

    return {
        data: data,
        opHtml: opHtml,
        getPlayers: getPlayers,
        clearPlayers: clearPlayers

    };
}();

ko.applyBindings(viewModel);

<h6>Simple JSRender + Knockout example</h6>
<button data-bind="click:getPlayers" class="btn btn-primary">Show Players</button>
<button data-bind="click:clearPlayers" class="btn btn-danger">Hide</button><br/><br/>
<div data-bind="html:opHtml"></div>

<script id="template" type="text/x-jsrender">
<ul>
    {{for players}}
    <li>
    <div>{{:#index+1}} - {{:name}} plays {{:game}} and lives in {{:address.city}}, {{:address.country}}.
    </div>
    <div>Also known as {{:description}} or in html {{html:description}}</div>
        {{if likes.length>0}}
            <div><b>Interests:</b> 
                <ul>
                    {{for likes}}
                        <li>{{:#data}}</li>
                    {{/for}}
                </ul>                
            </div>
        {{else}}
        <div><b>No Interests Defined</b></div>            
        {{/if}}
    </li><br/>
    {{/for}}
</ul>
</script>
<hr/>

body {margin: 15px;}