Question

I’ve Made several knockout ViewModels and now i’m trying to bind them to one ViewModel, but this doesn’t work correctly!

It should work like a navigation. If the LoginModel is done it should skip to the start Model!

I have no idea how this could be made

How to do this?

<!-- Login Seite -->
<form data-bind="visible: userNotLoggedIn" action="" data-role="page" id="Login">

    //Some code

</form>
<!-- ----------------------------------  -->


<!-- Start Seite -->

<form data-bind="visible: showStart" action="" data-role="page" id="pageStart">

   //Some Code

</form>

<!-- --------------------------------------------------------------------- -->



<!-- Projekt Details-->
<form data-bind="visible: showDetails" action="" data-role="page" id="pageDetails">

   // SOME CODE

</form>
</body>
<script type="text/javascript">
    $('#Login').live('pageinit', function (event) {
        ko.applyBindings(new LoginViewModel(), document.getElementById('Login'));
    });

    $('#pageStart').live('pageinit', function (event) {
    alert("Hallo");
        ko.applyBindings(new StartViewModel(), document.getElementById('pageStart'));
    });

    $('#pageDetails').live('pageinit', function (event) {
        alert("Hallo");
        ko.applyBindings(new DetailsViewModel(),document.getElementById('pageDetails'));
    });

</script>
Javascript for Knockout ViewModels:

function LoginViewModel() { //Some Code }

function StartViewModel() { //Some Code }

function DetailsViewModel() { //Some Code}

Answer 1

If I have understood your question correctly you are trying to split a page into three interchangeable view models – Login, Start, Detail.

This could be easily done by grouping them into one master view model. And placing each part in a annonymous template (or knockout ‘if’ comment blocks).

var masterViewModel = {
    loginVM: ko.observable(),
    detailsVM: ko.observable()
};

var LoginVM = function () {
    this.showDetails = function () {
        masterViewModel.loginVM(null);
        masterViewModel.detailsVM(new DetailsVM());
    };
};

var DetailsVM = function () {
    this.showLogin = function () {
        masterViewModel.loginVM(new LoginVM());
        masterViewModel.detailsVM(null);
    };
};

masterViewModel.loginVM(new LoginVM()); 

ko.applyBindings(masterViewModel);​

<!-- ko template: { 'if': loginVM, data: loginVM } -->  
    <h1>This is the login</h1>  
    <button data-bind="click: showDetails">Show Details</button>  
<!-- /ko -->

<!-- ko template: { 'if': detailsVM, data: detailsVM } -->  
    <h1>These are the details</h1>  
    <button data-bind="click: showLogin">Show Login</button>  
<!-- /ko -->  

Here is a complete sample in a jsfiddle – http://jsfiddle.net/angelyordanov/edT79/.