Wednesday, August 14, 2013

Using Handlerbars and JQuery in PhoneGap

Here is the very basic steps to use a template model in a PhoneGap application. I won't be going in details in this note.
"Those attending the PhoneGap class should incorporate the database as a practice. Thank you"

Ensure that the following steps have already been taken
  1. Creating Android App with PhoneGap
  2. Using Alert Pop-up
Step 1: Install the Handlebars and JQuery scripts
Download
  1. Handlerbars from http://handlebarsjs.com
  2. JQuery 1 from http://jquery.com/download/
Extract and copy the .js files to the Project's assets/www/lib folder

Step 2: Update the index.html
Replace the the contents within the body tags with the following;

 <h1>Hello PhoneGap</h1>  
  <script id="a-comment" type="text/x-handlebars-template">  
   <p><b>{{name}}</b> on {{date}}</p>  
   <ul>  
   {{#each comment}}  
   <li>{{description}}  
   {{/each}}  
   </ul>  
 </script>  
 <script src="lib/handlebars.js"></script>  
 <script src="lib/jquery-1.10.2.min.js"></script>  
 <script src="js/main.js"></script>  

Step 3: Update the js/main.js
Remove the initialize: function() and add following codes;


      renderHomeView: function() {  
      var today = new Date();  
      var dateTxt = today.getDate() +   
      "." + (today.getMonth()+1) +  
      "." + today.getFullYear();        
      var data = {  
      name: "I am the One",   
      date: dateTxt,  
      comment: [  
           { description: "walking with you."  
           },   
           { description: "eating together."  
           },  
           { description: "driving around town."  
           },  
      ] };  
   $('body').html(this.homeTemplate(data));       
   },  
   initialize: function() {  
        var self = this;  
        var source = $("#a-comment").html();  
     self.showAlert('This is how its done','Info');  
     this.homeTemplate = Handlebars.compile(source);  
     this.renderHomeView();  
   }  

No comments: