1

我正在尝试在页面之间共享 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>

数据.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 回答