jQueryMobile - 如何为此脱机应用生成动态页面

时间:2013-06-11 18:08:42

标签: jquery html5 jquery-mobile cordova

我正在使用jQueryMobile制作移动应用。 该应用程序将显示有关教育机构的信息, 喜欢:关于在研究所工作的每个人的详细信息, 关于每个课程等。对于提到的每个项目, 该应用程序将在新页面(屏幕)上显示其相关信息。

由于类别数量可能有数百页, 我需要知道生成页面的选项是什么 在飞行中。

首先想到的是做类似以下的事情:

给出一个像这样的JSON对象:

{
    "data": [
        {
            "name": "Paul",
            "image": "http://images1.wer.nocookie.net/Paul.jpg",
            "content": "<p> Paul is the bla bla that <a href=\"/wiki/PAULO\" title=\"PAULO\">PAULO</a> gives to blabla.</p>"
        },
        {
            "name": "Dr. Larry",
            "image": "http://images2.wer.nocookie.net/DRLarry.jpg",
            "content": "<p>Dr. Lawrence (Larry) is a psychologist blabla.</p>"
        }
    ]
}

我用jQueryMobile这样处理它:

$(document).bind('pagebeforeshow', '#home', function(){      
                $.ajax({
                    url: "cast.json",
                    dataType: "json",
                    async: false,
                    success: function (result) {
                        ajax.parseJSON(result);
                    }
                });         
            });
            var ajax = {  
                parseJSON:function(result){
                    $('#contenido').append('<h1>'+result.data[1].name+'</h1><h2>' + result.data[1].content+ '</h2> <img alt="dsdsd" src="'+result.data[1].image+'">');
                }
            }

此页面:

<body>
        <div data-role="page" id="home" data-add-back-btn="true">
            <div data-role="header" >
                <h1>This is the header
            </div>  

            <div data-role="content">
                <div id="contenido"></div>

            </div>

        </div>
    </body>

但我甚至不知道这是不是一个好方法。 你认为什么是好的解决方案?

我想用PhoneGap制作应用程序。

提前致谢。

0 个答案:

没有答案