1

ページ間で ViewModel を共有しようとしています。

pageA.html と pageB.html と別の data.js ファイルがあるとします。pageA には (Knockout を使用して) バインドされたフィールドがあり、ボタンをクリックすると、同じ ViewModel にバインドされたいくつかのフィールドを持つ pageB に移動します。これを機能させることができません - 何が欠けていますか?

もちろん、すべてのページ (data-role="page") を 1 つの .html ファイル内に保持することはできますが、それはうまく機能しますが、それが唯一の方法ですか?

編集 - pageB.html は pageA のコピーです - 多くのページで別のログイン機能がないという問題を表示しようとしています!!!

これはコードです：

pageA.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
    <title>PageA</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
    <script src="JS/data.js"></script>

</head>
<body>
    <div data-role="page" id="login">

        <div id="loginDetails">

            <div data-role="fieldcontain">
                <label for="username">
                    Username:</label>
                <input type="text" name="name" id="username" data-bind="value: userid" />
            </div>

            <div data-role="fieldcontain">
                <label for="pswd">
                    Password:</label>
                <input type="text" name="name" id="pswd" data-bind="value: pswd" />
            </div>

        </div>

        <a id="btnLogin" data-role="button" data-bind="click: login">Login</a>

    </div>

    <script type="text/javascript">

        ko.applyBindings(S5.myViewModel);

    </script>

</body>
</html>

pageB.html (上記とほとんど同じですが、その javascript ブロックは呼び出されないようです...)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head lang="en">
    <title>pageB</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
    <script src="JS/data.js"></script>

</head>
<body>
    <div data-role="page" id="abcd">

        <div id="loginDetails">

            <input type="text" name="name" data-bind="value: userid" />

            <input type="text" name="name" data-bind="value: pswd" />

        </div>

    </div>

    <script type="text/javascript">
        debugger;   <-- THIS NEVER GETS CALLED!!

        ko.applyBindings(S5.myViewModel);

    </script>

</body>
</html>

data.js

var S5;

(function (S5) {

    S5.myViewModel = {
        userid: ko.observable('marcel'),
        pswd: ko.observable('xxx'),
        login: function () {

            // ** DO LOGIN CHECK then move to pageB

            $.mobile.changePage("pageB.html", { transition: "slideup" });
        },
    };

})(S5 || (S5 = {}));
4

1 に答える 1

1

jQuery Mobile は、ビューの読み込みと変更に Ajax Navigation を使用します。マルチ HTML ページ テンプレートを使用すると、最初のページ (html ファイル) 全体が読み込まれます。ただし、Ajax でフェッチされた他のビュー/ページについては、コンテンツ<body>のみをロードし、他のタグ ( など) を無視し<script>ます<head>...

問題を解決するには、余分な JS ライブラリまたはコードを 内に移動します<div data-role="page">。

于 2013-10-02T09:10:10.363 に答える