1

私はいくつかのノックアウト ViewModel を作成し、それらを 1 つの 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}
4

1 に答える 1

1

私があなたの質問を正しく理解した場合、あなたはページを 3 つの交換可能なビュー モデル (ログイン、開始、詳細) に分割しようとしています。

これは、それらを 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 に答える