如何在app中加载listView项目

时间:2013-03-23 09:33:29

标签: jquery-mobile cordova

我使用Telerik Icenium创建移动应用程序,它只涉及Cordova和Jquery移动应用程序。

在首页上我有一个像这样的listView

<ul data-role="listview">
                <li><a href="#OpenProject?pid=1" data-transition="slide">Project 1</a></li>
                <li><a href="#OpenProject?pid=2" data-transition="slide">Project 2</a></li>
            </ul>

我想从本地存储加载,然后当用户选择时,我会将其与我的API同步。

使用localstorage并从那里获取项目是一种好方法吗?如果是这样,任何人都可以给我一个很好的方法来加载从本地json文件或从移动设备上的本地数据库到listView的项目。

由于

1 个答案:

答案 0 :(得分:1)

我为你做了一个工作的例子:http://jsfiddle.net/Gajotres/W3YDd/

$(document).on('pagebeforeshow', '#index', function(){       
        if(typeof(Storage)!=="undefined") {
            localStorage.jsonExample='[{"score":null,"popularity":3,"translated":true,"adult":false,"language":"en","original_name":"The Goonies","name":"The Goonies","alternative_name":"Балбесы","movie_type":"movie","id":9340,"imdb_id":"tt0089218","url":"http://www.themoviedb.org/movie/9340","votes":43,"rating":8.5,"certification":"PG","overview":"A young teenager named Mikey Walsh finds an old treasure map in his fathers attic. Hoping to save their homes from demolition, Mikey and his friends Data Wang, Chunk Cohen, and Mouth Devereaux run off on a big quest to find the secret stash of Pirate One-Eyed Willie.","released":"1985-06-06","posters":[{"image":{"type":"poster","size":"thumb","height":138,"width":92,"url":"http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w92/bZUbpjwnarSHJK40W9sGpyedWhx.jpg","id":"4ea6009334f8633bdc002f61"}},{"image":{"type":"poster","size":"w154","height":231,"width":154,"url":"http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w154/bZUbpjwnarSHJK40W9sGpyedWhx.jpg","id":"4ea6009334f8633bdc002f61"}},{"image":{"type":"poster","size":"cover","height":278,"width":185,"url":"http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w185/bZUbpjwnarSHJK40W9sGpyedWhx.jpg","id":"4ea6009334f8633bdc002f61"}},{"image":{"type":"poster","size":"w342","height":513,"width":342,"url":"http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w342/bZUbpjwnarSHJK40W9sGpyedWhx.jpg","id":"4ea6009334f8633bdc002f61"}},{"image":{"type":"poster","size":"mid","height":750,"width":500,"url":"http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w500/bZUbpjwnarSHJK40W9sGpyedWhx.jpg","id":"4ea6009334f8633bdc002f61"}},{"image":{"type":"poster","size":"original","height":1500,"width":1000,"url":"http://d3gtl9l2a4fn1j.cloudfront.net/t/p/original/bZUbpjwnarSHJK40W9sGpyedWhx.jpg","id":"4ea6009334f8633bdc002f61"}}],"backdrops":[{"image":{"type":"backdrop","size":"thumb","height":169,"width":300,"url":"http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w300/awhHFqiw6Dta0uHQVjgwQiyOgro.jpg","id":"4ffdbd7f760ee3570d0000e8"}},{"image":{"type":"backdrop","size":"poster","height":439,"width":780,"url":"http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w780/awhHFqiw6Dta0uHQVjgwQiyOgro.jpg","id":"4ffdbd7f760ee3570d0000e8"}},{"image":{"type":"backdrop","size":"w1280","height":720,"width":1280,"url":"http://d3gtl9l2a4fn1j.cloudfront.net/t/p/w1280/awhHFqiw6Dta0uHQVjgwQiyOgro.jpg","id":"4ffdbd7f760ee3570d0000e8"}},{"image":{"type":"backdrop","size":"original","height":1080,"width":1920,"url":"http://d3gtl9l2a4fn1j.cloudfront.net/t/p/original/awhHFqiw6Dta0uHQVjgwQiyOgro.jpg","id":"4ffdbd7f760ee3570d0000e8"}}],"version":3350,"last_modified_at":"2013-03-19 13:57:18 UTC"}]';      
        }

    var jsonObject = jQuery.parseJSON(localStorage.jsonExample);

    $('#movie-data').append('<li>Movie name:<span> ' + jsonObject[0].original_name+ '</span></li>');
    $('#movie-data').append('<li>Popularity:<span> ' + jsonObject[0].popularity + '</span></li>');
    $('#movie-data').append('<li>Rating:<span> ' + jsonObject[0].rating+ '</span></li>');
    $('#movie-data').append('<li>Overview:<span> ' + jsonObject[0].overview+ '</span></li>');
    $('#movie-data').append('<li>Released:<span> ' + jsonObject[0].released+ '</span></li>');  
    $('#movie-data').listview('refresh'); 
});

为了更好地澄清,这个例子是从我的另一个例子中创建的:

http://jsfiddle.net/Gajotres/jLdFj/

在此示例中,json是从远程源获取的。但基本原则是一样的。