将更多挖空视图模型绑定到 1 个视图

Question

我已经制作了几个挖空视图模型，现在我正在尝试将它们绑定到一个视图模型，但这不能正常工作！

它应该像导航一样工作。如果登录模型完成，它应该跳到开始模型！

我不知道这是怎么做到的

怎么做？

<!-- 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"注释块）。

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 -->  

这是 jsfiddle 中的完整示例 - http://jsfiddle.net/angelyordanov/edT79/。