Question

我有<dom-module>这个类型为Array的属性locations，每隔一段时间就会从外部更新一次：

<dom-module id="my-map">
    <template>
        <google-map api-key="MY_API_KEY" id="map" libraries="visualization,geometry,drawing">
            <template is="dom-repeat" items="{{locations}}" as="user">
                <template is="dom-repeat" items="{{user.trace}}">
                    <google-map-marker latitude="{{item.latitude}}" longitude="{{item.longitude}}">
                    </google-map-marker>
                </template>
            </template>
        </google-map>
    </template>
</dom-module>
<script>
Polymer({
    is : 'my-map',
    properties : {
        locations : {
            type : Array,
            value : [],
            observer : '_locationsChanged'
        }
    },
    ready : function(){
        var self = this;
        this.map = this.querySelector('google-map');
        this.map.addEventListener('google-map-ready',function(){
            // some styling happening here.
        });
    },
    _locationsChanged : function(newLocations, oldLocations){
        // this fires correctly! ...
    }
});
</script>

在另一个模块中，我发送一个AJAX请求来检索要在地图上显示为标记的数据。请求完成后，我会更新locations属性，并且_locationsChanged回调会完全正常。

该案例中的数据如下所示：

[  
    {  
      "_id":"someID1",
      "trace":[  
        {  
          "latitude":55.629215086862,
          "longitude":10.640099246067,
        }
      ]
    },
    {  
      "_id":"someID2",
      "trace":[  
        {  
          "latitude":50.14743798944287,
          "longitude":18.52913082363756,
        }
      ]
    }
]

奇怪的事情发生了。

每当locations是一个空数组时，newLocations都会<template dom-repeat="{{locations}}">元素没有问题。但是，如果地图已经显示了几个标记，那么旧的<google-map-marker>对象仍然存在，新的对象只是添加。因此，如果我在更新document.querySelectorAll('google-map-marker')后在开发控制台locations中执行此操作，则会看到newLocations 和 oldLocations。

为了测试数据绑定是否在<google-map>元素之外应用时正常工作，我添加了一个类似的模板。在这里，一切都按预期完美运行：

<template is="dom-repeat" items="{{locations}}" as="user">
    <ul>
        <li>
            <span>{{user._id}}</span>
            <ul>
                <template is="dom-repeat" items="{{user.trace}}" as="trace">
                    <li><span>Lat:</span><span>{{trace.latitude}}</span></li>
                </template>
            </ul>
        </li>
    </ul>
</template>

到目前为止没有帮助：

在GoogleMap对象上调用clear()。
创建第二个属性，该属性绑定到dom-repeat模板，但访问this way：

    this.splice('_locations',0,this._locations.length);
    newLocations.forEach(function(location){
        self.push('_locations',location);
    });

使用单向数据绑定。
通过googleMap.removeChild(marker)手动删除DOM节点并添加它们。好的，这实际上在某种程度上有效但不是数据绑定的全部内容，你不必这样做吗？

因此，总结一下：Google地图中的<template is="dom-repeat">无法正确通知有关locations属性的更改。任何人都能告诉我我做错了什么，或者数据绑定在<google-map>元素内是否有效？我是否将阴影/阴影DOM混合在一起？我是否错误地使用了dom-repeat的东西？我会失去理智吗？我会感谢任何解决方案的暗示。谢谢！

Answer 1

我不确定它是否会对您的具体问题产生影响，但应在此format中指定数组和对象的默认值（请参阅值属性）：

 properties : {
        locations : {
            type : Array,
            value : function() { return [];},
            observer : '_locationsChanged'
        }
    },

我还认为您必须在clear()元素上调用google-map，因为_updateMarkers()函数不会为您执行此操作（请参阅here）

将对象数组绑定到包含google-map-marker元素的模板

1 个答案: