Question

我正在尝试在页面之间共享ViewModel。

假设我有pageA.html和pageB.html以及单独的data.js文件。 pageA有字段绑定（使用Knockout），单击一个按钮后，它移动到pageB，它也有一些字段绑定到同一个ViewModel。我不能让这个工作 - 我错过了什么？

当然，我可以将所有页面（data-role =“page”）保存在单个.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 = {}));

Answer 1

jQuery Mobile使用Ajax Navigation来加载和更改视图。使用多HTML页面模板时，它会完全加载第一页（html文件）。但是，对于使用Ajax获取的其他视图/页面，它仅加载<body>内的内容，忽略其他标记，即<script>，<head>等...

要解决您的问题，请在<div data-role="page">内移动任何额外的JS库或代码。

如何在jQuery mobile中的不同页面之间共享ViewModel？

1 个答案: