Question

我几乎是Knockout的初学者经过一段时间的工作，我追踪了一个小问题（我正在尝试建立一个移动SPA）：

如果我在我的项目中绑定JQuery和Knockout，我的ViewModel会被调用两次：

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

如果我尝试运行此代码，则表示警报的消息框会出现两次，但只会绑定JQuery mobile！

有谁知道我的问题是什么？如果我尝试运行这个消息框形式警报来两次，但只有JQuery mobile绑定！

有谁知道我的问题是什么？

Answer 1

在jQuery移动页面isn't reliable中使用$（document）.ready。这可能会导致您的问题。

在您当前的代码中，您通过调用隐式使用.ready：

$(function() { ...

相反，请使用pageinit event：

$('#aboutPage').live( 'pageinit', function(event) {
   // Create and bind your Knockout view model here.
});

JQuery调用Knockout ViewModel

1 个答案: