One example, of reading JSON, and displaying content of JSON as check boxes. HTML:
<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript" src="js/index.js"></script>
		<script type="text/javascript" src="js/lib/knockout-3.5.1.js"></script>	
		<script type="text/javascript" src="js/lib/jquery-3.4.1.min.js"></script>	
	</head>
	
	<body onload="DoApply()">
		Cities:
		<span data-bind="template: {name: 'cities-template', foreach: cities}"></span>
		<script type="text/html" id="cities-template" >
			<br/>
			<input data-bind="id: id, name: name" type="checkbox">
			<label data-bind="for: name, text: name"></label>
		</script>			
	</body>
</html>
JS:
function MyViewModel() {
	var self = this;
	self.cities = ko.observableArray([]);
	
	$.getJSON("cities.json", function(data) { 
		data.forEach(function (item, index) {
			self.cities.push({name: item.Name, id:item.ID});	
		});
		
	})
}

function DoApply() {
	ko.applyBindings(new MyViewModel());
}
Where cities.json looks like:
[
	{
		"ID": 0,
		"Name": "Bonn"
	},
	{
		"ID": 0,
		"Name": "Petrovaradin"
	},
	{
		"ID": 0,
		"Name": "Novi Sad"
	},
	{
		"ID": 0,
		"Name": "Balingen"
	}
]
Live example see here.

---

Edit: observableArray must be global, something like ns.cities = ko.observableArray([]);, and pushed should be observable:

/*global window, ko*/

(function (ns) {
    "use strict";
    ns.CitiesViewModel = function () {
        var self = this,
            getCities = new GetCities(),
            city = ko.observable();

        ns.cities = ko.observableArray();

        function GetCities() {
            $.getJSON("api/cities", function (data) {
                data.forEach(function (item, index) {
                    city({ name: item.Name, id: item.ID });
                    ns.cities.push(city());
                });

            });
        }

        return {
            myCities: getCities
        }
    }


}(window.milosev));

---

Or even better and make it part of CitiesViewModel:

/*global window, ko, $*/

(function (ns) {
    "use strict";
    ns.CitiesViewModel = function () {
        var self = this,
            getCities = new GetCities(),
            city = ko.observable();

        function GetCities() {
            self.cities = ko.observableArray();

            $.getJSON("api/cities", function (data) {
                data.forEach(function (item, index) {
                    city({ name: item.Name, id: item.ID });
                    self.cities.push(city());
                });
            });

            return self.cities;
        }

        return {
            cities: getCities
        };
    };
}(window.milosev));

Example which I am using when I want to see which model I am sending to knockout. 

HTML:

    <body>
        <div data-bind="text: function() {debugger; return myText}()"></div>
    </body>

JS:

/*global ko*/
(function () {
    "use strict";
    function MyModel() {
        var self = this;

        self.myText = ko.observable("Test");
    }

    MyModel = new MyModel();
    ko.applyBindings(MyModel);
}());

Notice in HTML line:

<div data-bind="text: function() {debugger; return myText}()"></div>

In that line you can see debugger, and also return, which will force function to return value. Now you can debug knockout.

In custom bindings you can pass whole object, parse it and later use it, also you can pass a function (like observable for example).

HTML

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="/knockout-3.3.0.js"></script>
    <script type="text/javascript" src="/index.ko.extension.js" defer></script>
    <script type="text/javascript" src="/index.js" defer></script>
</head>
<body>
    <div data-bind="myBind: {propertyOne: testOne, propertyTwo: testTwo}"></div>
</body>
</html>

Here notice part:

<div data-bind="myBind: {propertyOne: testOne, propertyTwo: testTwo}"></div>

Now index.js:

/*global window, ko*/

function MyLog(msg) {
    function doTheLog(msg) {
        console.log(msg);
    }

    return {
        doTheLog: doTheLog
    }
};

window.doSomething = new MyLog();

window.testOne = "test one";
window.testTwo = "test two";

ko.applyBindings();

Here notice that I have created global variables testOne and testTwo, I need them for binding. 

index.ko.extension.js:

/*global ko, console*/
/*jslint unparam: true*/
ko.bindingHandlers.myBind = {
    init: function (element, valueAccessor) {
        "use strict";
        var myObjExample = ko.unwrap(valueAccessor());
        doSomething.doTheLog(myObjExample.propertyOne);
        doSomething.doTheLog(myObjExample.propertyTwo);
    }
};
/*jslint unparam: false*/

Here notice:

var myObjExample = ko.unwrap(valueAccessor());

With that I am actually parsing my object.

Unit test looks like this:

/*global describe, it, expect, beforeEach, ko, window, document, $*/
describe("my bind", function () {
    "use strict";
    var sut;
    beforeEach(function () {
        //'<div data-bind="myBind: {propertyOne: testOne, propertyTwo: testTwo}"></div>'
        var myDiv = document.createElement('div');
        myDiv.setAttribute("data-bind", "myBind: {propertyOne: testOne, propertyTwo: testTwo}");
        document.body.appendChild(myDiv);
        window.testOne = "test one";
        window.testTwo = "test two";
        window.doSomething = jasmine.createSpyObj('MyLog', ['doTheLog']);
        ko.applyBindings();
    });
    it("gets object from value acessor", function () {
        expect(window.doSomething.doTheLog).toHaveBeenCalled();
    });
});

Example download from here.

---

Actually, better unit test looks like:

/*global describe, it, expect, beforeEach, ko, window, document*/
describe("my bind", function () {
    "use strict";
    var sut,
        testOne,
        testTwo;
    beforeEach(function () {
        var myDiv = document.createElement('div');
        testOne = jasmine.createSpy("testOne");
        testTwo = jasmine.createSpy("testTwo");
        myDiv.setAttribute("data-bind", "myBind: {testOne: testOne, testTwo: testTwo}");
        document.body.appendChild(myDiv);
        window.doSomething = jasmine.createSpyObj('MyLog', ['doTheLog']);
        ko.applyBindings({testOne: testOne, testTwo: testTwo});
    });
    it("gets object from value acessor", function () {
        expect(window.doSomething.doTheLog).toHaveBeenCalled();
    });
});

Notice first my binding:

myDiv.setAttribute("data-bind", "myBind: {testOne: testOne, testTwo: testTwo}");

Then the apply bindings:

ko.applyBindings({testOne: testOne, testTwo: testTwo});

Version with this test download from here.

One example of progress bar, where value of the progress bar will be changed from another file, and also, example of multiple view models.

HTML:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
    <body>
        <div data-bind="with: window.SM.Bootstrapper.myModel">
            <progress data-bind="attr: {max: myProgress.progressMax, value: myProgress.progressValue}"></progress>
            <button data-bind="click: myClickMe.clickMe">Click Me!</button>
        </div>

        <script type="text/javascript" src="lib/knockout-3.3.0.js"></script>

        <script type="text/javascript" src="js/sm.namespaces.js"></script>
        <script type="text/javascript" src="js/sm.progress.js"></script>
        <script type="text/javascript" src="js/sm.clickme.js"></script>
        <script type="text/javascript" src="js/sm.bootstrapper.js"></script>
    </body>
</html>
Here notice line:

<div data-bind="with: window.SM.Bootstrapper.myModel">

Namespaces:

/*global window*/
window.SM = window.SM || {};
window.SM.Bootstrapper = window.SM.Bootstrapper || {};
window.SM.Progress = window.SM.Progress || {};
window.SM.ClickMe = window.SM.ClickMe || {};

sm.progress.js:

/*global window, ko*/
(function (ns) {
    "use strict";
    function Progress() {
        var self = this;

        self.progressValue = ko.observable(10);
        self.progressMax = ko.observable(100);
    }

    ns.Progress = Progress;
}(window.SM));

sm.clickme.js:

/*global window*/
(function (ns) {
    "use strict";
    function ClickMe() {
        var self = this;
        self.clickMe = function () {
            ns.Bootstrapper.myModel.myProgress.progressValue(100);
        };
    }

    ns.ClickMe = ClickMe;
}(window.SM));

sm.bootstrapper.js:

/*global ko, window, myProgress*/
(function myBootStrap(ns) {
    "use strict";
    var init = function () {
        var myClickMe = new window.SM.ClickMe(),
            myModel,
            myProgress;

        myProgress = new window.SM.Progress();

        myModel = {
            myProgress: myProgress,
            myClickMe: myClickMe
        };

        ns.Bootstrapper.myModel = myModel;

        ko.applyBindings(myModel);
    };
    ns.Bootstrapper = {init: init};
}(window.SM));

window.SM.Bootstrapper.init();
Here notice line:

ns.Bootstrapper.myModel = myModel

with that line I created myModel global variable which belongs to Bootstrapper namespace, and because it is global I can use it in binding as I showed at beginning.

Example download from here, or see it in action:


---
One more example. Javascript part will remain same, only HTML part will look like this:
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
    <body>
        <span data-bind="template: {name: 'myParentProgressTemplate'}"></span>
        <span data-bind="template: {name: 'myParentClickTemplate'}"></span>
		
		<script type="text/html" id="myProgressTemplate">
            <progress data-bind="attr: {max: progressMax, value: progressValue}"></progress>
		</script>
		
		<script type="text/html" id="myClickTemplate">
			<button data-bind="click: clickMe">Click Me!</button>
		</script>
		
		<script type="text/html" id="myParentProgressTemplate">
			<span data-bind="template: {name: 'myProgressTemplate', data: myProgress}"></span>
		</script>

		<script type="text/html" id="myParentClickTemplate">
			<span data-bind="template: {name: 'myClickTemplate', data: myClickMe}"></span>
		</script>		

        <script type="text/javascript" src="lib/knockout-3.3.0.js"></script>

        <script type="text/javascript" src="/js/sm.namespaces.js"></script>
        <script type="text/javascript" src="/js/sm.progress.js"></script>
        <script type="text/javascript" src="/js/sm.clickme.js"></script>
        <script type="text/javascript" src="/js/sm.bootstrapper.js"></script>
    </body>
</html>
Here notice "parent" template, I name it like this, because that template will take class to which other classes belong to, in my case that is like myClickMe.clickMe, or myProgress.progressMax, it these cases "parent" classes are myClickMe and myProgress. So, notice data: myClickMe and data: myProgress.
Example download from here.