if (HTMLImports.ready) {做东西();} 别的 {HTMLImports.whenReady(doStuff);}
这样，您可以确保 doStuff 函数只会被调用一次.
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.
<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.
解决方案
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.
