javascript - 使用 HTMLImports.whenReady 在 Chrome 中不起作用

Question

我有一个使用 HTMLImports.whenReady 的网络组件，以确保在正确的时间触发某些事情，问题是这修复了我在 IE 和 Firefox 中遇到的错误，但现在它在 chrome 中不起作用。

所以在网站的页面上我有这个:

<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>

然后 polymer webcomponent 看起来像这样

<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>

这背后的想法是 map 标记必须在循环服务器端制作，所以我有时会在整个站点中使用不同的标记，然后将它们加载到一个通用的 Web 组件中并推送标记进入“标记”对象。

当我最初编写脚本时，我在 document.ready 上触发，这会导致 IE 和 FF 不加载标记，因为在加载组件之前不会创建 VAR，因此更改为 HTMLImports.whenReady 这允许这个发生，但现在由于某种原因破坏了 chrome。

重新阅读我的问题，我想具体一点，对象标记在 chrome 中是空的，但在 IE 中不是，上面是 FF。

Answer 1

当您在 Chrome 中将回调注册到 HTMLImports.whenReady 时，该事件已经触发。您的回调不会被调用，因为它注册得太晚了。使用您的解决方案，您可以在第一个分配给 markers 的任务中捕获 Chrome，在第二个分配给 polyfill 的浏览器中捕获。一般处理此问题的另一种方法是:

if (HTMLImports.ready) {
   doStuff();
} else {
   HTMLImports.whenReady(doStuff);
}

这样，您就可以确保 doStuff 函数只会被调用一次。