Multi window app

by val2048

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-1.2.1.debug.js"></script>
<script src="https://raw.github.com/douglascrockford/JSON-js/master/json2.js"></script>
<h3> Books </h3>

<form>
    <div data-bind="template: {name: activeView, data: activeModel}">
        
        
    </div>
</form>
<script type="text/html" id="empty">
</script>
<script type="text/html" id="viewLogin">
    <p>
        Please, enter your name: <input data-bind="value: userName"/>
        <input type="button" value="login" data-bind="click: loginClick"/>
    </p>
</script>

<script type="text/html" id="viewGreetings">
    <p>
        Hi <span data-bind="text: user"/>
    </p>
</script>

JavaScript

function loginViewModel(parent)
{
    var me = this;
    this.viewName = "viewLogin";
    this.userName = ko.observable("userName");
    this.loginClick = function()
        {
            parent.activeModel(new greetingsViewModel(me.userName()));
        }
}
function greetingsViewModel(userName)
{
    this.viewName = "viewGreetings";
    this.user = ko.observable(userName);
}
function multiViewViewModel()
{
    var me = this;
    this.activeView = function()
        {
            return me.activeModel().viewName;
        }
    this.activeModel = ko.observable(new loginViewModel(this));
}

ko.applyBindings(new multiViewViewModel());