1

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

它应该像导航一样工作。如果 LoginModel 完成，它应该跳到 start Model！

我不知道这是怎么做到的

这该怎么做？

<!-- 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}
4

1 回答 1

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

于 2012-12-07T14:45:46.700 回答