问题
I have a web component using HTMLImports.whenReady to make sure that certain things get fired in the correct timing, and the problem is this fixed the bugs I was having in IE and Firefox, but now it is not working in chrome.
so on the page of the site i have this:
<link rel="import" href="/static/template/components/result-map.html">
<link rel="import" href="/static/template/components/result-options.html">
<link rel="import" href="/static/template/components/advanced-modal.html">
<link rel="import" href="/static/template/components/map-modal.html">
<div class="row-fluid">
<div id="component" class="span12">
<div class="well">
<!-- TMPL_IF Listings -->
<div class="row-fluid">
<small><em>Press a map marker for more information</em></small><br />
<result-map></result-map>
</div>
<!-- /TMPL_IF -->
</div>
</div>
</div>
<script>
/*GENERATE MAP MARKERS*/
HTMLImports.whenReady(function(){
<!-- TMPL_IF Listings -->
<!-- TMPL_LOOP Listings -->
<!-- TMPL_IF have_geocode -->
markers.push({
latLng: [<!-- TMPL_VAR latitude -->, <!-- TMPL_VAR longitude -->],
data: '...',
options: {
icon: "/static/images/mapmarker.png",
title: "<!-- TMPL_VAR street_no --> <!-- TMPL_VAR street -->, <!-- TMPL_VAR city -->, <!-- TMPL_VAR state --> <!-- TMPL_VAR zip -->"
}
});
<!-- TMPL_ELSE -->
markers.push({
address:"<!-- TMPL_VAR street_no --> <!-- TMPL_VAR street -->, <!-- TMPL_VAR city -->, <!-- TMPL_VAR state --> <!-- TMPL_VAR zip -->",
data: '...',
options: {
icon: "/static/images/mapmarker.png",
title: "<!-- TMPL_VAR street_no --> <!-- TMPL_VAR street -->, <!-- TMPL_VAR city -->, <!-- TMPL_VAR state --> <!-- TMPL_VAR zip -->"
}
});
<!-- /TMPL_IF -->
<!-- /TMPL_LOOP -->
<!-- /TMPL_IF -->
});
</script>
and then the polymer webcomponent looks like this
<dom-module id="result-map">
<template>
<div id="map_canvas"></div>
</template>
<script>
var markers = [];
HTMLImports.whenReady(function(){
$('#map_canvas').gmap3({
map:{
options:{
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,
mapTypeControlOptions: {
center: true,
zoom: 10,
},
}
},
marker:{
values: markers,
options:{
draggable: false
},
events:{
click: function(marker, event, context){
$('#map-modal').empty().append(context.data).modal('show');
$(this).gmap3('get').panTo(marker.getPosition());
},
},
},
autofit:{maxZoom: 16},
})
});
Polymer({
is: 'result-map',
// Fires when an instance of the element is created
created: function() {},
// Fires when the local DOM has been fully prepared
ready: function() {},
// Fires when the element was inserted into the document
attached: function() {},
// Fires when the element was removed from the document
detached: function() {},
// Fires when an attribute was added, removed, or updated
attributeChanged: function(name, type) {}
});
</script>
</dom-module>
The idea behind this is that the map markers have to be made in the loop server side so I then, and at times through out the site the markers are different, and then load them in to a common webcomponent and push the markers into the "marker" object.
When I originally wrote the script I was firing on document.ready and this would cause IE and FF to not load the markers as the VAR was not created until the the component was loaded, so changing to HTMLImports.whenReady this allowed this to happen, but now breaks chrome for some reason.
Re-reading my question, I want to be specific, the object markers is empty in chrome but not in IE an FF with what is above.
回答1:
At the time you register your callback to HTMLImports.whenReady in Chrome, the event has already fired. Your callback won't get called because it was registered too late. With your solution, you catch Chrome in the first assignment to markers and the polyfilled browsers in the second one.
Another way to handle this problem in general is this:
if (HTMLImports.ready) {
doStuff();
} else {
HTMLImports.whenReady(doStuff);
}
This way, you ensure that the doStuff function will be called exactly once.
回答2:
Probably not correct, but I had to pass the markers in to a different object and then define markers twice like such and this seams to work:
var m = [];
<!-- TMPL_IF Listings -->
<!-- TMPL_LOOP Listings -->
<!-- TMPL_IF have_geocode -->
m.push({
latLng: [<!-- TMPL_VAR latitude -->, <!-- TMPL_VAR longitude -->],
data: '<div class="modal-body"><p class="lead"><!-- TMPL_VAR street_no --> <!-- TMPL_VAR street --><br /><!-- TMPL_VAR city -->, <!-- TMPL_VAR state --> <!-- TMPL_VAR zip --></p><div class="row-fluid"><div class="span5"><img style="width: 95%" class="img-polaroid" src="/property/photo/<!-- TMPL_VAR listing_id -->/1" alt="Property Photo Unavailable"/></div><div class="offset1 span5"><strong>$<!-- TMPL_VAR NAME=price --></strong><br /><!-- TMPL_UNLESS lan -->Beds: <!-- TMPL_VAR bdrms --><br />Baths: <!-- TMPL_VAR baths --><br />Sq. Ft. <!-- TMPL_VAR sqft --><br /><!-- /TMPL_UNLESS --><!-- TMPL_IF com -->Business Type: <!-- TMPL_VAR business_type --><br />For Lease: <!-- TMPL_VAR for_lease_yn --><br />For Sale: <!-- TMPL_VAR for_sale_yn --><br /><!-- /TMPL_IF --><!-- TMPL_IF lan -->Parcel Type: <!-- TMPL_VAR parcel_type --><br />Lot Size: <!-- TMPL_VAR lot_size --><br />Acres: <!-- TMPL_VAR acres --><br /><!-- /TMPL_IF --><br /><!-- TMPL_IF is_broker --><img src="/static/images/brokerlogo.gif" alt="broker logo" /><!-- TMPL_ELSE --><img src="/static/images/smallbrlogo.gif" alt="small broker logo" /><!-- /TMPL_IF --></div></div><a href="/property/detail/<!-- TMPL_VAR listing_id -->" class="btn btn-small btn-primary" target="_self">View Details</a></div>',
options: {
icon: "/static/images/mapmarker.png",
title: "<!-- TMPL_VAR street_no --> <!-- TMPL_VAR street -->, <!-- TMPL_VAR city -->, <!-- TMPL_VAR state --> <!-- TMPL_VAR zip -->"
}
});
<!-- TMPL_ELSE -->
m.push({
address:"<!-- TMPL_VAR street_no --> <!-- TMPL_VAR street -->, <!-- TMPL_VAR city -->, <!-- TMPL_VAR state --> <!-- TMPL_VAR zip -->",
data: '<div class="modal-body"><p class="lead"><!-- TMPL_VAR street_no --> <!-- TMPL_VAR street --><br /><!-- TMPL_VAR city -->, <!-- TMPL_VAR state --> <!-- TMPL_VAR zip --></p><div class="row-fluid"><div class="span5"><img style="width: 95%" class="img-polaroid" src="/property/photo/<!-- TMPL_VAR listing_id -->/1" alt="Property Photo Unavailable"/></div><div class="offset1 span5"><strong>$<!-- TMPL_VAR NAME=price --></strong><br /><!-- TMPL_UNLESS lan -->Beds: <!-- TMPL_VAR bdrms --><br />Baths: <!-- TMPL_VAR baths --><br />Sq. Ft. <!-- TMPL_VAR sqft --><br /><!-- /TMPL_UNLESS --><!-- TMPL_IF com -->Business Type: <!-- TMPL_VAR business_type --><br />For Lease: <!-- TMPL_VAR for_lease_yn --><br />For Sale: <!-- TMPL_VAR for_sale_yn --><br /><!-- /TMPL_IF --><!-- TMPL_IF lan -->Parcel Type: <!-- TMPL_VAR parcel_type --><br />Lot Size: <!-- TMPL_VAR lot_size --><br />Acres: <!-- TMPL_VAR acres --><br /><!-- /TMPL_IF --><br /><!-- TMPL_IF is_broker --><img src="/static/images/brokerlogo.gif" alt="broker logo" /><!-- TMPL_ELSE --><img src="/static/images/smallbrlogo.gif" alt="small broker logo" /><!-- /TMPL_IF --></div></div><a href="/property/detail/<!-- TMPL_VAR listing_id -->" class="btn btn-small btn-primary" target="_self">View Details</a></div>',
options: {
icon: "/static/images/mapmarker.png",
title: "<!-- TMPL_VAR street_no --> <!-- TMPL_VAR street -->, <!-- TMPL_VAR city -->, <!-- TMPL_VAR state --> <!-- TMPL_VAR zip -->"
}
});
<!-- /TMPL_IF -->
<!-- /TMPL_LOOP -->
<!-- /TMPL_IF -->
markers = m;
HTMLImports.whenReady(function(){
markers = m;
});
来源：https://stackoverflow.com/questions/32577633/using-htmlimports-whenready-not-working-in-chrome