想法得到這個網絡應用程序的localStorage CRUD

這是my github link你們可以看到應用程序正在運行。我設法將存儲在localStorage中的信息序列化並顯示出來。（在表單中插入內容後點擊顯示數據按鈕）。想法得到這個網絡應用程序的localStorage CRUD

jqm.js文件包含我設法提供的所有代碼。當我點擊列表中的一個項目（參見jqm.js文件中的outputData函數）以添加一個鏈接到我單擊的項目的動態頁面以顯示有關該特定項目的更多信息時，我會喜歡它。

請大家，在提出一堆方法來「重寫」整個事情之前，我想爲我的當前代碼提供解決方案（如果有的話）。我希望儘可能地處理我的邏輯，而不是重新編寫整個應用程序。非常感謝您在重放時考慮這些細節。這個領域內的任何想法或建議都不勝感激。非常感謝。

來源

2013-03-26 Nactus

任何人，想法？ :) – Nactus

我對你的想法很少。

首先我給你做的，你怎麼能一個ListView元素後點擊創建一個動態頁面的例子：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。

來源

2013-03-27 16:03:59 Gajotres

非常感謝Gajotres。 – Nactus

想法得到這個網絡應用程序的localStorage CRUD

回答

相關問題