Handlebars XHR

by sjmcpherson

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
<ul>
  <li>IP: <span></span></li>
  <li>IP</li>
</ul> 

<div id="entry">
  <h1>{{title}}</h1>
  <div class="body">
    {{body}}
  </div>
</div>



      <script id="Handlebars-Template" type="text/x-handlebars-template">
          <div id="entry">
              <h1>{{title}}</h1>
              <div class="body">
                {{body}}
              </div>
            </div>

          
      </script>

JavaScript

// $.getJSON( "http://smart-ip.net/geoip-json?callback=?",
        //function(data){
            //alert( data.host);
        //}
    //});         
    

var Ajax = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
 
Ajax.onreadystatechange = function(){
   if (Ajax.readyState == 4 && Ajax.status == 200)
   {
      //Parse the JSON data
      var RecipeData = JSON.parse(Ajax.responseText);
       
      //Get the Template from above
      var Source = document.getElementById("Handlebars-Template").textContent;
       
      //Compile the actual Template file
      var Template = Handlebars.compile(Source);
       
      //Generate some HTML code from the compiled Template
      var HTML = Template();
       
      //Replace the body section with the new code.
      document.getElementById("Handlebars-Template").innerHTML = HTML;
   }
}
 
Ajax.open("GET","http://smart-ip.net/geoip-json", true);
Ajax.send()

    

    var source   = $("#entry").html();
    alert(source);
    var template = Handlebars.compile(source);          
    var context = {title: "My New Post",body: "This is my first post!"};
    var html = template(context);
    $("#entry").html(html);