1

私はノックアウトの初心者です。しばらく作業した後、小さな問題を追跡しました（モバイルSPAを構築しようとしています）：

プロジェクトで JQuery と Knockout をバインドすると、ViewModel が 2 回呼び出されます。

  @{
        Layout=null;
    }

<head>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="@Url.Content("~/Content/jquery.mobile-1.2.0.min.css")" />
    <link rel="stylesheet" href="@Url.Content("~/Content/Site.css")" />
    <script src="../../Scripts/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.mobile-1.2.0.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(document).bind("mobileinit", function () {
             // As of Beta 2, jQuery Mobile's Ajax navigation does not work in all cases (e.g.,
             // when navigating from a mobile to a non-mobile page, or when clicking "back"
             // after a form post), hence disabling it.
             $.mobile.ajaxEnabled = false;
         });
    </script>

    @*jquery löst ViewMOdel aus*@

    <script type="text/javascript" src="../../Scripts/upshot.min.js"></script>
    <script type="text/javascript" src="../../Scripts/Upshot_Timeworx.js"></script>

    <script type="text/javascript" src="../../Scripts/knockout-2.2.0.js"></script>

</head>
<body>
    <!-- Login Seite -->
    <form data-bind="visible: userNotLoggedIn">  

        <label>Mandant</label><br /> <input data-bind="value: mandant" type="text" name="Mandant" />
        <br />
        <label>Benutzername</label><br /> <input data-bind="value: user" type="text" name="Benutzername"/>
        <br />
        <label>Passwort</label><br /> <input data-bind="value: password" type="password" name="Passwort"/>
        <br />

        <input type="button" value="Anmelden" name="login" data-bind="click: login" align="middle" />

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


</body>
<script type="text/javascript">
    $(function () {
  function AppViewModel() {
            var self = this;
            var time = new Date();

            //Der User ist noch nicht angemeldet
            self.userNotLoggedIn = ko.observable(true);

            //Die Startseite wird versteckt
            self.showStart = ko.observable(false);

            //Die Detailseite wird versteckt 
            self.showDetails = ko.observable(false);



            //----------------------------------------------//
            //LogInSeite
            self.mandant = ko.observable("");
            self.user = ko.observable("");
            self.password = ko.observable("");

            //Überprüfen ob Passwort übereinstimmt
            self.login = function () {
                var pass = self.password();
                //alert(pass); Überprüfen ob das richtige passwort gespeichert wurde

                //!!!!!! ES MÜSSEN NOCH DIE ZUGANGSDATEN AUS DER DATENBANK EINGESETZT WERDEN!!!!!"
                if ((self.password() == "gregrech") && (self.user() == "Gregor")) {
                    //Code um die LogInSeite zu schließen 
                    //und die Startseite zu zeigen
                    //self.userNotLoggedIn(false);
                    self.showStart(true);
                    self.userNotLoggedIn(false);    //Die Log In Seite wird im Hintergrund versteckt

                }
                else {
                    alert("Username oder Passwort nicht korrekt");
                }

            }


            //Hier Endet der Knockout-Code für die LogIn-Seite
            //-------------------------------------------------------------------------------------------------------------------//


            //StartSeite
            self.details = function () {
                self.showStart(false);
                self.showDetails(true);
                //Funktioniert noch nicht
                //self.projectName = self.projectDetails.projectName();

            }
            //--------------------------------------------//

        ko.applyBindings(new AppViewModel);
    });
</script>

このコードを実行しようとすると、メッセージ ボックスからアラートが 2 回表示されますが、バインドされているのは JQuery モバイルだけです。

誰かが私の問題が何であるか知っていますか? これをメッセージボックスフォームから実行しようとすると、アラートが2回表示されますが、JQueryモバイルのみがバインドされています!

誰かが私の問題が何であるか知っていますか?

4

1 に答える 1

0

jQuery モバイル ページで $(document).ready を使用することは信頼できません。これが問題を引き起こしている可能性があります。

現在のコードでは、呼び出しを介して暗黙的に .ready を使用しています。

$(function() { ...

代わりに、pageinit イベントを使用します。

$('#aboutPage').live( 'pageinit', function(event) {
   // Create and bind your Knockout view model here.
});
于 2012-12-04T16:03:27.933 に答える