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

然后聚合物网络组件看起来像这样

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

这背后的想法是地图标记必须在循环服务器端制作，所以我有时在整个站点中标记是不同的，然后将它们加载到一个通用的 web 组件中并推送"marker" 对象中的标记。

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

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

Answer 1

可能不正确，但我必须将标记传递给另一个对象，然后像这样定义标记两次，这样接缝才能工作：

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;
});

Answer 2

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

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

这样，您可以确保 doStuff 函数将被恰好调用一次。

使用 HTMLImports.whenReady 在 chrome 中不起作用

using HTMLImports.whenReady not working in chrome

javascript

web-component

polymer