如何加載應用程序中的listView項目

Question

我使用Telerik Icenium來創建移動應用程序，它只是涉及到Cordova和Jquery手機。

在FrontPage我有這樣

<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> 

這一個ListView我想從本地存儲加載代替，然後當用戶選擇的話，我會同步，對我的API。

這是使用本地存儲並從中獲取它們的項目的好方法嗎？如果是這樣，任何人都可以給我一個很好的方式來從本地json文件或從移動設備上的本地數據庫加載項目到列表視圖。

感謝

Answer 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是從遠程來源獲得的。但基本原理是一樣的。