title: Using Handlebars.js issue
body: <p>I'm having a small issue when I'm compiling a template with <a href="http://handlebarsjs.com/" rel="nofollow">Handlebars.js</a> . I have a JSON text file which contains an big array with objects : <a href="http://snippi.com/s/zcza65x" rel="nofollow">Source</a> ; and I'm using XMLHTTPRequest to get it and then parse it so I can use it when compiling the template.</p>
  
  <p>So far the template has the following structure :</p>
  
  <pre><code>&lt;div class="product-listing-wrapper"&gt;
  &lt;div class="product-listing"&gt;
      &lt;div class="left-side-content"&gt;
          &lt;div class="thumb-wrapper"&gt;
              &lt;img src="{{ThumbnailUrl}}"&gt;
          &lt;/div&gt;
          &lt;div class="google-maps-wrapper"&gt;
              &lt;div class="google-coordonates-wrapper"&gt;
                  &lt;div class="google-coordonates"&gt;
                      &lt;p&gt;{{LatLon.Lat}}&lt;/p&gt;
                      &lt;p&gt;{{LatLon.Lon}}&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="google-maps-button"&gt;
                  &lt;a class="google-maps" href="#" data-latitude="{{LatLon.Lat}}" data-longitude="{{LatLon.Lon}}"&gt;Google Maps&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="right-side-content"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>And the following block of code would be the way I'm handling the JS part :</p>
  
  <pre><code>$(document).ready(function() {
  
  /*
      Default Javascript Options
      ~a javascript object which contains all the variables that will be passed to the cluster class
  */
  var default_cluster_options = {
      animations              : ['flash', 'bounce', 'shake', 'tada', 'swing', 'wobble', 'wiggle', 'pulse', 'flip', 'flipInX', 'flipOutX', 'flipInY', 'flipOutY', 'fadeIn', 'fadeInUp', 'fadeInDown', 'fadeInLeft', 'fadeInRight', 'fadeInUpBig', 'fadeInDownBig', 'fadeInLeftBig', 'fadeInRightBig', 'fadeOut', 'fadeOutUp', 'fadeOutDown', 'fadeOutLeft', 'fadeOutRight', 'fadeOutUpBig', 'fadeOutDownBig', 'fadeOutLeftBig', 'fadeOutRightBig', 'bounceIn', 'bounceInUp', 'bounceInDown', 'bounceInLeft', 'bounceInRight', 'bounceOut', 'bounceOutUp', 'bounceOutDown', 'bounceOutLeft', 'bounceOutRight', 'rotateIn', 'rotateInDownLeft', 'rotateInDownRight', 'rotateInUpLeft', 'rotateInUpRight', 'rotateOut', 'rotateOutDownLeft', 'rotateOutDownRight', 'rotateOutUpLeft', 'rotateOutUpRight', 'lightSpeedIn', 'lightSpeedOut', 'hinge', 'rollIn', 'rollOut'],
      json_data_url           : 'data.json',
      template_data_url       : 'template.php',
      base_maps_api_url       : 'https://maps.googleapis.com/maps/api/js?sensor=false',
      cluser_wrapper_id       : '#content-wrapper',
      maps_wrapper_class      : '.google-maps',
  };
  
  /*
      Cluster
      ~main class, handles all javascript operations
  */
  var Cluster = function(environment, cluster_options) {
  
          var self = this;
  
          this.options = $.extend({}, default_cluster_options, cluster_options);
          this.environment = environment;
          this.animations = this.options.animations;
          this.json_data_url = this.options.json_data_url;
          this.template_data_url = this.options.template_data_url;
          this.base_maps_api_url = this.options.base_maps_api_url;
          this.cluser_wrapper_id = this.options.cluser_wrapper_id;
          this.maps_wrapper_class = this.options.maps_wrapper_class;
  
          this.test_environment_mode(this.environment);
          this.initiate_environment();
          this.test_xmlhttprequest_availability();
          this.initiate_gmaps_lib_load(self.base_maps_api_url);
          this.initiate_data_processing();
  
      };
  
  /*
      Test Environment Mode
      ~adds a modernizr test which looks wheater the cluster class is initiated in development or not
  */
  Cluster.prototype.test_environment_mode = function(environment) {
      var self = this;
      return Modernizr.addTest('test_environment', function() {
          return (typeof environment !== 'undefined' &amp;&amp; environment !== null &amp;&amp; environment === "Development") ? true : false;
      });
  };
  
  /*
      Test XMLHTTPRequest Availability
      ~adds a modernizr test which looks wheater the xmlhttprequest class is available or not in the browser, exception makes IE
  */
  Cluster.prototype.test_xmlhttprequest_availability = function() {
      return Modernizr.addTest('test_xmlhttprequest', function() {
          return (typeof window.XMLHttpRequest === 'undefined' || window.XMLHttpRequest === null) ? true : false;
      });
  };
  
  /*
      Initiate Environment
      ~depending on what the modernizr test returns it puts LESS in the development mode or not
  */
  Cluster.prototype.initiate_environment = function() {
      return (Modernizr.test_environment) ? (less.env = "development", less.watch()) : true;
  };
  
  Cluster.prototype.initiate_gmaps_lib_load = function(lib_url) {
      return Modernizr.load(lib_url);
  };
  
  /*
      Initiate XHR Request
      ~prototype function that creates an xmlhttprequest for processing json data from an separate json text file
  */
  Cluster.prototype.initiate_xhr_request = function(url, mime_type) {
      var request, data;
      var self = this;
      (Modernizr.test_xmlhttprequest) ? request = new ActiveXObject('Microsoft.XMLHTTP') : request = new XMLHttpRequest();        
      request.onreadystatechange = function() {
          if(request.readyState == 4 &amp;&amp; request.status == 200) {
              data = request.responseText;
          }
      };
      request.open("GET", url, false);
      request.overrideMimeType(mime_type);
      request.send();
      return data;
  };
  
  Cluster.prototype.initiate_google_maps_action = function() {
      var self = this;
      return $(this.maps_wrapper_class).each(function(index, element) {
          return $(element).on('click', function(ev) {
  
              var html = $('&lt;div id="map-canvas" class="map-canvas"&gt;&lt;/div&gt;');
  
              var latitude = $(element).attr('data-latitude');
              var longitude = $(element).attr('data-longitude');
  
              log("LAT : " + latitude);
              log("LON : " + longitude);
  
              $.lightbox(html, {
                  "width": 900,
                  "height": 250,
                  "onOpen"  : function() {
  
                  }
              });
              ev.preventDefault();
          });
      });
  };
  
  Cluster.prototype.initiate_data_processing = function() {
      var self = this;
      var json_data = JSON.parse(self.initiate_xhr_request(self.json_data_url, 'application/json; charset=ISO-8859-1'));
      var source_data = self.initiate_xhr_request(self.template_data_url, 'text/html');
      var template = Handlebars.compile(source_data);
  
      for(var i = 0; i &lt; json_data.length; i++ ) {
          var result = template(json_data[i]);
          $(result).appendTo(self.cluser_wrapper_id); 
  
      }
  
      self.initiate_google_maps_action(); 
  
  };
  
  /*
      Cluster
      ~initiate the cluster class
  */
  var cluster = new Cluster("Development");
  
  });
  </code></pre>
  
  <p>My problem would be that I don't think I'm iterating the JSON object right or I'm using the template the wrong way because if you check this link : <a href="http://rolandgroza.com/labs/valtech/" rel="nofollow">http://rolandgroza.com/labs/valtech/</a> ; you will see that there are some numbers there ( which represents latitude and longitude ) but they are all the same and if you take only a brief look at the JSON object each number is different.</p>
  
  <p>So what am  I doing wrong that it makes the same number repeat ? Or what should I do to fix it ? I must notice that I've just started working with templates so I have little knowledge it.</p>