Demo of Knockout.js with Sharepoint 2013

App.css

.tableStyle {
    border-collapse:collapse;
    border: 1px solid black;
    text-align:center;
    width:50%;
    padding:15px;
}

App.js

'use strict';

var hostWebUrl;
var appWebUrl;
var listItems
var completeCountryList;

$(document).ready(function () {
    //get the url of app web and host web
    hostWebUrl = QS("SPHostUrl");
    appWebUrl = QS("SPAppWebUrl");

    LoadData();
});

//class for saving the countries and their states
function CountryList(countryName, stateName) {
    var self = this;
    self.CountryName = countryName;
    self.StateName = stateName;
}

//View Model to combine data from list into the format which view expects
function CountryListViewModel() {
    var self = this;

    self.Countries = ko.observableArray([]);

    self.AddCountries = function (countryName, stateName) {
        self.Countries.push(new CountryList(countryName, stateName));
    }
}

//function which apply KO bindings and make a call to SP using CSOM
function LoadData() {

    completeCountryList = new CountryListViewModel();

    GetList();

    ko.applyBindings(completeCountryList);
    
}

function GetList() {
    var context = new SP.ClientContext(appWebUrl);
    
    //No need to use SP.RequestExecutor.js for cross domain calls to host web in SP Hosted web
    /* var factory = new SP.ProxyWebRequestExecutorFactory(appWebUrl);
    context.set_webRequestExecutorFactory(factory); */
    
    var hostContext = new SP.AppContextSite(context, hostWebUrl);

    var list = hostContext.get_web().get_lists().getByTitle("KnockoutList");
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml("<View><RowLimit>10</RowLimit></View>");

    listItems = list.getItems(camlQuery);

    context.load(listItems, "Include(Id, CountryName, StateName)");
    context.executeQueryAsync(ListItemsLoaded, ListItemsFailed);
}

function ListItemsLoaded(sender, args) {
    var enumerator = listItems.getEnumerator();

    while (enumerator.moveNext()) {
        var currentItem = enumerator.get_current();
        completeCountryList.AddCountries(currentItem.get_item("CountryName"), currentItem.get_item("StateName"));
    }

}

function ListItemsFailed(sender, args) {
    alert(args.get_message());
}

function QS(name) {
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

default.aspx

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

    <div id="divCountryList">

        <h2>Country List</h2>
        <br />

        <table id="tblCountryList" border="1" class="tableStyle">
            <thead>
                <tr>
                    <th>Country</th>
                    <th>State</th>
                </tr>
            </thead>
            <!-- Iterating through every list item using foreach of KO -->
            <tbody data-bind="foreach: Countries">
                <tr>
                    <td data-bind="text: CountryName"></td>
                    <td data-bind="text: StateName"></td>
                </tr>
            </tbody>
        </table>

    </div>

</asp:Content>