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

【问题标题】：How to share a ViewModel between different pages in jQuery mobile?如何在 jQuery mobile 中的不同页面之间共享 ViewModel？
【发布时间】：2013-10-02 07:10:25
【问题描述】：

我正在尝试在页面之间共享 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 = {}));

【问题讨论】：

尝试在data-role=pagediv内移动JS块。
是的 - 将 ViewModel 绑定到特定元素的范围缩小了效果 - 再次感谢 Omar :) !!
你能把这个写成答案，我可以把它标记为已回答吗？

标签： jquery-mobile knockout.js

【解决方案1】：

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

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

【讨论】：