动态缓存页面jquery mobile答案

【问题标题】：dynamic cache page jquery mobile动态缓存页面jquery mobile
【发布时间】：2014-05-24 07:48:59
【问题描述】：

您好，我是 jquery mobile 的新手。我在我的应用程序中添加了三个页面。 page1.html->page2.html->page3.html。当 page2.html 返回 page1.html.

时，我需要保留 page1 的文本框值

在我谷歌上搜索后，我得到了答案

    $(document).bind("mobileinit", function () {

    $.mobile.page.prototype.options.domCache = true;

});

我如何支持我的页面

history.go(-1);

转到下一页

$.mobile.pageContainer.pagecontainer("change", url, {
    allowSamePageTransition: true,
    transition: 'none',
    showLoadMsg: false,
    changeHash: true

})

但是当 page2 回到 page1，然后 page1 转到 page2 时，nw 是我的问题，page2 文本框值也将保留。是否有可能当我单击返回按钮时，文本框的值将被保留，但是当我单击下一个按钮时，页面将被刷新？

【问题讨论】：

标签： jquery-mobile caching back next

【解决方案1】：

您做错了，您应该阅读有关兑现的所有内容。

打开页面兑现后，您仍然可以选择将打开哪个页面以及不兑现哪个页面。

为了防止第二页变现，您需要做的就是将属性 data-dom-cache="false" 添加到您的第二页 data-role="page" div 容器中，就是这样。

工作示例：

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> 
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script>
            $(document).bind("mobileinit", function () {
                $.mobile.page.prototype.options.domCache = true;
            });     
        </script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>    
    </head>
    <body>     
        <div data-role="page" id="index" data-theme="a" >
            <div data-role="header">
                <h3>
                    First Page
                </h3>
                <a href="second.html" class="ui-btn-right">Next</a>
            </div>

            <div data-role="content">
                <input type="text" value="" id="sdfsd"/>
            </div>

            <div data-role="footer" data-position="fixed">

            </div>
        </div> 
    </body>
</html>

second.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>collapsible demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>

    <div data-role="page" id="page2" data-dom-cache="false">
        <div data-role="header">
            <a href="index.html" class="ui-btn-left">Back</a>
            <h1>jQuery Mobile Example</h1>
        </div>
        <div data-role="content" class="ui-content">
            <input type="text" value=""  id="dffsd"/>
        </div>
    </div>
</body>

</html>

【讨论】：