2014年10月28日 星期二

Parse.com的第三個練習(2016年底關閉)

中午12:36 Posted by Envisioning U-Commerce Lab

在第二個練習已經確定能成功讀取雲端資料庫了，接下來當然就是想辦法做出一個產品列表頁面囉。依設計App的慣例，當然是先找個好用的版型，這次我們練習用這個Mobile Design Templates，自GitHub下載其所有範例頁面的zip檔，將其解壓縮，找到 List View 子資料夾下的 Picture.html，將其複製到 common 子資料夾並改名為 ProductsList.html 來，並改寫下列部分：
  • 假設你也是將 ProductsList.html 放在 common資料夾下，那麼本來會引用其下的 js、css、images 之相對位置的 "../common/" 都要刪除喔。
  • 把 ProductsList.html 的34~98行刪除，更換為下列的程式碼：
    •  <ul id="TheList" class="list-view with-swipe left-thumbs right-one-icons">  
 </ul>  
 <script type="text/javascript">  
 Parse.initialize("APPLICATION_ID", "JAVASCRIPT_KEY");     //這裡要記得填上自己的Keys喔  
 var ProductsList = Parse.Object.extend("ProductsList");  
 var query = new Parse.Query(ProductsList);  
 // query.equalTo("欄位名稱", "欄位內容"); 不執行這行就等於是讀出全部的記錄  
 query.find({  
  success: function(results) {  
      var str = '';  
      // Do something with the returned Parse.Object values  
      for (var i = 0; i < results.length; i++) {  
       var object = results[i];  
       str += '<li>';  
       str +=      '<div class="thumbs">';  
       str +=           '<img class="thumb thumb-3" src="' + object.get("Photo") + '">';  
       str +=      '</div><!-- .thumbs -->';  
       str +=      '<a href="#" class="content">';  
       str +=           '<h2>' + object.get("Pname") + '</h2>';  
       str +=           '價格' + object.get("Price") + '元';  
       str +=           '<div class="list-view-icons">';  
       str +=                '<span class="icon-right-arrow">&nbsp;</span>';  
       str +=           '</div>';  
       str +=     '</a>';  
       str += '</li>';  
      }  
      document.getElementById("TheList").innerHTML = str;  
  },  
  error: function(error) {  
      alert("Error: " + error.code + " " + error.message);  
  }  
 });  
 </script>
  • 依照第二個練習下載的範例 index.html 的第11行所示，將此 js 引用語法複製到 ProductsList.html 的 head 區塊內。
    •  <script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.4.0.min.js"></script>


如果上述部分都正確改寫了，以瀏覽器開啟 ProductsList.html 執行，應該就會看到成功顯示產品清單囉。








延伸閱讀...