让这个 web 应用程序工作的 localStorage CRUD 的想法答案

【问题标题】：Ideas to get the localStorage CRUD for this web app working让这个 web 应用程序工作的 localStorage CRUD 的想法
【发布时间】：2013-03-16 18:16:19
【问题描述】：

这是my github link，你们可以看到应用正在运行。我设法将存储在 localStorage 中的信息序列化并显示出来。（在表单中插入内容后单击显示数据按钮）。

jqm.js 文件包含我想出的所有代码。当我单击列表中的一个项目（请参阅 jqm.js 文件中的 outputData 函数）以添加一个链接到我单击的项目的动态页面以显示有关该特定项目的更多信息时，我希望它。

各位，在想出一堆“重写”整个事情的方法之前，我想要一个解决方案（如果有的话）来解决我当前的代码。如果可能的话，我想处理我的逻辑，而不是从头开始重写整个应用程序。非常感谢您在重播时考虑这个细节。这个领域内的任何想法或建议都值得赞赏。提前非常感谢。

【问题讨论】：

标签： jquery jquery-mobile jquery-plugins local-storage

【解决方案1】：

我对你的想法很少。

首先，我为您提供了一个示例，说明如何在单击列表视图元素后创建动态页面：http://jsfiddle.net/Gajotres/nsfkx/

HTML：

<!DOCTYPE html>
<html>
<head>
    <title>jQM Complex Demo</title>
    <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.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>    
</head>
<body>
    <div data-role="page" id="index">
        <div data-theme="a" data-role="header">
            <h3>
                First Page
            </h3>
        </div>

        <div data-role="content">
            <ul data-role="listview" data-theme="a">
                <li data-id="1"><a>Dynamic page 1</a></li>
                <li data-id="1"><a>Dynamic page 2</a></li>
                <li data-id="1"><a>Dynamic page 3</a></li>
            </ul>    
        </div>

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

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

JS：

$(document).on('pagecreate', '#index', function(){       
    $(document).on('click', '[data-role="listview"] li', function(event) {
        if(event.handled !== true) // This will prevent event triggering more then once
        {   
            console.log('click');            
            event.handled = true; // click event is handled, dont bind it again

            var nextPageId = parseInt($('body [data-role="page"]').length)+1;
            $('[data-role="page"]').last().after('<div data-role="page" id="article'+nextPageId+'"><div data-role="header" data-theme="b" data-position="fixed" data-id="footer"><h1>Articles</h1><a href="#" data-rel="back" data-role="button" data-theme="b" class="ui-btn-left">Back</a></div><div data-role="content"><p>Article '+nextPageId+'</p></div><div data-role="footer" data-theme="b" data-position="fixed" data-id="footer"><h1>Footer</h1></div></article>');
            //console.log($('body').html());
            //$('#article'+nextPageId).trigger('pagecreate');
            $.mobile.changePage('#article'+nextPageId, {transition: "slide", reverse: false}, true, true); 
        }            
    });   
});

第二件事，因为您要创建动态内容，所以您需要放弃文档准备并切换到正确的 jquery Mobile 页面事件。

如果您想了解有关 jQuery Mobile 页面事件的更多信息，请查看此 ARTICLE，或查找 HERE。

【讨论】：