I’m having a small issue when I’m compiling a template with Handlebars.js . I have a JSON text file which contains an big array with objects : Source ; and I’m using XMLHTTPRequest to get it and then parse it so I can use it when compiling the template.
So far the template has the following structure :
<div class="product-listing-wrapper">
<div class="product-listing">
<div class="left-side-content">
<div class="thumb-wrapper">
<img src="{{ThumbnailUrl}}">
</div>
<div class="google-maps-wrapper">
<div class="google-coordonates-wrapper">
<div class="google-coordonates">
<p>{{LatLon.Lat}}</p>
<p>{{LatLon.Lon}}</p>
</div>
</div>
<div class="google-maps-button">
<a class="google-maps" href="#" data-latitude="{{LatLon.Lat}}" data-longitude="{{LatLon.Lon}}">Google Maps</a>
</div>
</div>
</div>
<div class="right-side-content"></div>
</div>
And the following block of code would be the way I’m handling the JS part :
$(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' && environment !== null && 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 && 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 = $('<div id="map-canvas" class="map-canvas"></div>');
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 < 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");
});
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 : http://rolandgroza.com/labs/valtech/ ; 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.
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.
i’m going to base this answer off my experience with mustache.js and the online documentation for handlebars.js. i reflected on my use of mustache.js in several mobile-based projects to diagnose your problem. i also read handlebars.js documentation and discovered that it works basically the same as mustache.js.
i think the issue is not having a built-in block helper within your template markup. when i run into a situation where my source data must be iterated to parse n number of objects within an array, i use native template iterators from the library. i do this because i can pass in a large object and not have to process each object property on my own. the template engine will do it for me using it’s own internal methods. i just need to be sure my data is properly formatted. in your case, i would use handlebars’ “each” block helper to iterate over your data source. see the site docs here: http://handlebarsjs.com/
i created a demo that takes this approach. you can view it here:
my first handlebars.js test
take note of three things:
1.) i made an adjustment to your template markup:
i included the ‘each’ iterator and gave it a unique hash of “productListing”.
the hash will allow me to map my data source object to this template iterator.
2.) i made a data source change. the data looks like this:
i created “listings” to reference the object. i then created an outer object for your current data structure with the property “productListing”. “productListing” allows me to map the array with objects to the template markup.
3.) i then made it all work with this javascript:
you might try my rendering approach in your “Cluster.prototype.initiate_data_processing” method.