How to pass values from mustache to JavaScript?
Question
WHen generating HTML, I can easily fetch properties from JSON objects that I need by simply calling
{{cmpyJson[jobCmpyID].company_name}}
then the html would include "google", "amazon" or any other objects asked.
however, when I try to do
<script>
var company = cmpyJson[jobCmpyID].company_name
</script>
company is assigned null .
so how do I go about setting the company value to a string obtainable by html?
Here is the overall page I am trying to generate:
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
var address = "lamar ";
//address = "austin, tx";
//var address ={{cmpyJson[jobCmpyID].company_name}}
//address +=" Company, ";
address += locJson[jobLocID].location_name;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 11,
center: latlng,
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
if (geocoder) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
map.setCenter(results[0].geometry.location);
var infowindow = new google.maps.InfoWindow(
{ content: '<b>'+address+'</b>',
size: new google.maps.Size(150,50)
});
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title:address
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
} else {
alert("No results found");
}
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width:100%; height:200px;"></div>
</body>
1 answers
solution1
1 2015-04-24 19:44:20
I think it would make sense to put the company name into HTML and then, in your JS, parse it from HTML. Example:
<script>
// …
var address = document.getElementyById('company-name');
// …
</script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">
<div id="map_canvas" style="width:100%; height:200px;">
This should be a map showing the location of <span id="company-name">{{cmpyJson[jobCmpyID].company_name}}</span>.
</div>
</body>
That way, you also get a nice fallback for when the map fails to load.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.