Question

更新：以下是此情况的文档：Conditional templates use the if attribute to conditionally create a template instance.

此应用plnkr.co应执行以下操作：

使用core-ajax组件从DB获取project_location（本例中为JSON）
使用google-map组件显示带标记的地图
当用户拖动市场时，使用core-ajax将新位置保存到DB

问：如何让google-map组件在AJAX请求完成之前等待渲染？

目前出现此错误：＆＃34;在观察者回调期间捕获异常：TypeError：纬度必须是数字＆＃34;，我认为这是因为在启动{{project_location}}之前呈现了google-map。

     <core-ajax id="ajax_get_location"
        auto
        url="project_location.json"
        params='{"idProject":"{{idProject}}"}'
        on-core-response="{{locationLoaded}}"
        handleAs="json"
        response = "{{project_location}}"></core-ajax>



     <google-map id="project_location_map" 
          zoom="{{project_location.location_map_zoom}}" 
          fitToMarkers>
      <google-map-marker 
                   latitude  ="{{project_location.location_map_marker_latitude | toFixed(2)}}"
                   longitude ="{{project_location.location_map_marker_longitude | toFixed(2)}}"
                   title     ="{{project_title}}" 
                   draggable ="true"
                   >
       {{project_title}}
      </google-map-marker></google-map>

Answer 1

我认为最干净的方法是不要将此视为<core-ajax>的时间问题。从根本上说，问题是您不希望在页面上包含<google-map>元素，直到project_location的值为止。在您的代码段中，project_location值来自<core-ajax>，但您可以轻松想象通过其他方式填充project_location的不同实现。

所以，如果你这样思考，那么有意义的是将<google-map>包装在检查值为project_location的条件模板中：

<template if="{{project_location}}">
  <google-map>
     ...
  </google-map>
<template>

Answer 2

您可以在core-axax完成时更改模型上的值，并使用<template if="{{ajaxHasFinished}}">...</templ<te>

包装其他元素

Answer 3

除了其他人所说的内容之外，另一种方式在教程https://www.polymer-project.org/docs/start/tutorial/step-3.html中进行了演示，其中您创建了另一个元素来执行ajax事务，并在原始元素中使用它。数据传输是通过属性和数据绑定实现的。

我认为这是一种更好的方法，因为您将数据显示与数据提取分开，使其在软件工程中看起来更好。

P.S。我已经尝试了其他答案，但我发现你是否使用if条件并不重要。

聚合物，如何在渲染其他元素之前等待core-ajax完成？

3 个答案: