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.