使用 jqMobi 进行数据持久化

发布于 2025-01-01 09:31:41 字数 1129 浏览 5 评论 0原文

好吧，我已经通过谷歌搜索和堆栈溢出进行了排序，但到目前为止我还不知道如何解决这个问题。

我想使用 jqMobi + CSS + HTML 5 为 iphone 构建一个待办事项程序。我使用过很多 jQuery，花了一些时间使用 jQuery Mobile，并完成了大量的 css 和 HTML（尽管很少使用 jQuery） HTML5）。我需要做的是保存用户打开程序时生成的列表。

我动态生成和链接页面没有问题...但是当您第二次打开程序时，我生成的所有页面（IE 待办事项）都会消失。我知道这是因为它们没有作为基本程序的一部分写入。我想到解决这个问题的方法是将这些列表保存到文件或数据库中，然后在程序启动时加载它们。

我已经看过使用 Titanium Studio 执行此操作的文档（它支持 SQL lite），但是页面的生成和一般 UI 很糟糕。此外，让模拟器从该代码运行给我带来了很多麻烦。至少我可以说，在将代码移植到编译状态之前，使用 appMobi 的应用程序进行测试可以为您提供一个不错的模拟器。

无论如何，有谁知道如何通过数据库或文件生成为 jqMobi + CSS + HTML 5 设置数据持久性（在程序重新启动之间）？

编辑x2： 既然我让你陷入困境@ian，你能看一下这段代码并告诉我为什么 $.ui.addContentDiv() 似乎没有更新内容吗？ $(#content).append(字符串);似乎也不想合作。我需要调用一些函数来使其刷新吗？剥离它一点仍然有问题。奇怪的是，添加到列表中效果很好，但是当我尝试添加该 div 层时它不存在......

代码如下：

function genPage( id, list, parent ) {
    var content = '<div id="' + id + '" class="panel">' + id + '</div>';    
    var threadLink='<li><a href="#' + id +'">' + id + '</a></li>';      
    $("#" + list).append(threadLink);
    $("#content").append(content);

    //$.ui.addContentDiv(id, content, id);
}

原文

Well, I've sorted through the Google search and I've sorted through stack overflow and as of yet I don't have a good idea of how to do about this.

I'd like to build a To Do program for the iphone using jqMobi + CSS + HTML 5. I've worked with jQuery a bunch, spent some time with jQuery Mobile and have done tons of css and HTML, (though little work with HTML5). What I need to be able to do is save lists that the user generates when they open up the program.

I'm having no problem dynamically generating and linking pages... but when you open up the program a second time all of the pages (IE To Do Items) that I've generated disappear. I understand that this is because they weren't written in as part of the base program. It occurs to me that the way around this is to save those lists into a file or a DB and then load them when the program starts up.

I've seen documentation to do this using Titanium Studio, (it supports SQL lite) but the generation of pages and general UI suck. Additionally getting an emulator to run from that code has given me a lot of trouble. At least I can say that using appMobi's app to test gives you a decent emulator to work with before you've ported code to a compiled state.

In any case, does anyone know how to set up data persistence (between program restarts) for jqMobi + CSS + HTML 5 with either a DB or file generation?

EDIT x2:
Since I've got you on the hook @ian can you take a look a this code and tell me why the $.ui.addContentDiv() doesn't appear to be updating the content? $(#content).append(string); doesn't appear to want to cooperate either. Is there some function I need to call to make it refresh? Stripped it down a bit still having issues. Oddly enough the append to the list works just fine, but when I try to add that div layer it doesn't exist...

code is as follows:

function genPage( id, list, parent ) {
    var content = '<div id="' + id + '" class="panel">' + id + '</div>';    
    var threadLink='<li><a href="#' + id +'">' + id + '</a></li>';      
    $("#" + list).append(threadLink);
    $("#content").append(content);

    //$.ui.addContentDiv(id, content, id);
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

甜点 2025-01-08 09:31:43

这是我的第一个技巧，让 json 和 cookie 可以为任何可能觉得有帮助的人工作。它只是一个原型，所以没有做太多事情。为了简单起见，我删除了 AppMobi 开发环境添加的额外 JavaScript。

编辑：看起来 JSON 对于数据结构来说非常有效，只要您不尝试做任何特别数据密集的事情。而且看起来 appMobi 的 AppMobi.cache 对于 cookie 来说工作得很好。这是我的迷你脚本，用于演示基本的 cookie 操作/JSON 字符串。

代码：

<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
<style type="text/css">
    /* Prevent copy paste for all elements except text fields */
    *  { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
    input, textarea  { -webkit-user-select:text; }

    /* Set up the page with a default background image */
    body {
        background-color:#fff;
        color:#000;
        font-family:Arial;
        font-size:48pt;
        margin:0px;padding:0px;
        background-image:url('images/background.jpg');
    }
</style>
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script> 
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/xhr.js"></script> 
<script type="text/javascript">

function setCookie() {
    var value = document.getElementById('cookie').value;
    AppMobi.cache.setCookie("test", value, 1);
}

function testbed() {
alert("Trying new things!");
var jsonobj = {"bindings": [
        {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},
        {"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},
        {"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}
    ]
};

var test = jsonobj.bindings[0].method;
alert(test);
}

function getCookie(){
    var cookie = AppMobi.cache.getCookie("test");
    document.getElementById("cookievalue").innerHTML = cookie;
}

</script>

</head>
<body>
<form action="javascript: setCookie()">
<input type="text" id="cookie" value="set a cookie">
<input type="submit">
</form>

<p id="cookievalue"></p>

<form action="javascript: getCookie()">
<input type="submit" value="Get a Cookie">
</form>

<form action="javascript: testbed()">
<input type="submit" value="try new things">
</form>
</body>
</html>

Here's my first hack at getting json and cookies to work to whoever might find it helpful. It's just a prototype so it doesn't do much. I've cut out the extra javascript added by AppMobi's dev environment for the sake of simplicity.

EDIT: It looks like JSON works pretty good for a data structure, so long as you're not trying to do anything particularly data intensive. Also it looks like appMobi's AppMobi.cache works pretty well for cookies. Here's my mini script to demo basic cookie manipulation/JSON strings.

code:

<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
<style type="text/css">
    /* Prevent copy paste for all elements except text fields */
    *  { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
    input, textarea  { -webkit-user-select:text; }

    /* Set up the page with a default background image */
    body {
        background-color:#fff;
        color:#000;
        font-family:Arial;
        font-size:48pt;
        margin:0px;padding:0px;
        background-image:url('images/background.jpg');
    }
</style>
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script> 
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/xhr.js"></script> 
<script type="text/javascript">

function setCookie() {
    var value = document.getElementById('cookie').value;
    AppMobi.cache.setCookie("test", value, 1);
}

function testbed() {
alert("Trying new things!");
var jsonobj = {"bindings": [
        {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"},
        {"ircEvent": "PRIVMSG", "method": "deleteURI", "regex": "^delete.*"},
        {"ircEvent": "PRIVMSG", "method": "randomURI", "regex": "^random.*"}
    ]
};

var test = jsonobj.bindings[0].method;
alert(test);
}

function getCookie(){
    var cookie = AppMobi.cache.getCookie("test");
    document.getElementById("cookievalue").innerHTML = cookie;
}

</script>

</head>
<body>
<form action="javascript: setCookie()">
<input type="text" id="cookie" value="set a cookie">
<input type="submit">
</form>

<p id="cookievalue"></p>

<form action="javascript: getCookie()">
<input type="submit" value="Get a Cookie">
</form>

<form action="javascript: testbed()">
<input type="submit" value="try new things">
</form>
</body>
</html>

回复收藏 0 原文