Edit in JSFiddle

$(document).ready(function() {
    var viewModel = function() {
        var showCountries = ko.observable(false);
        var player = {
            firstName: "Sachin",
            lastName: "Tendulkar"
        };
        var countries = [{
            key: "IND",
            name: "India"},
        {
            key: "USA",
            name: "United States"},
        {
            key: "AUS",
            name: "Australia"},
        {
            key: "UK",
            name: "United Kingdom"}];

        return {
            countries: countries,
            showCountries: showCountries,
            player: player
        };
    }();

    ko.applyBindings(viewModel);
});

<h3>Containerless bindings</h3>
<h4> with </h4>
<!-- ko with:player -->
    <span data-bind="text:lastName"></span> , <span data-bind="text:firstName"></span><br/>
<!-- /ko -->
<hr/>
<h4>foreach</h4>
<ul>
    <li>All Countries</li>
    <!-- ko foreach:countries -->
        <li><span data-bind="text:name"></span></li>
    <!-- /ko -->
</ul>
<hr/>
<h4>if</h4>
<input type="checkbox" data-bind="checked:showCountries"/> Show Countries
<table>
    <!-- ko if: showCountries -->
        <tbody data-bind="template : {name: 'st3', foreach:countries}"></tbody>
    <!-- /ko -->
</table>
<hr/>
<h4>template</h4>
<!-- ko template: {name: 'sampleTemplate2'} -->
<!-- /ko -->
<hr/>

<script type="text/html" id="sampleTemplate2">
    <span>sample template text</span><br/>
    <span>some more text</span><br/>
    <span>even more text</span><br/>
    <input type="text" /> 
</script>

<script type="text/html" id="st3">
    <tr>
        <td style="border: red 2px solid;width:100px"><span data-bind="text:key"></span></td>
        <td style="border: blue 2px solid;width:100px"><span data-bind="text:name"></span></td>
    </tr>
</script>