Question

我已经制作了几个淘汰ViewModel，现在我正在尝试将它们绑定到一个ViewModel，但这不能正常工作！

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

我不知道如何做到这一点

怎么做？

<!-- 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/。

绑定更多淘汰ViewModels到1视图

1 个答案: