Polymer，如何在渲染其他元素之前等待core-ajax完成? [英] Polymer, how to wait for core-ajax to finish before rendering other elements?

问题描述

更新:以下是针对这种情况的文档:条件模板使用if属性有条件地创建模板实例.

Update: here are the docs for this situation: Conditional templates use the if attribute to conditionally create a template instance.

此应用 plnkr.co 时，应执行以下操作:

this app, plnkr.co, should do the following:

1. 使用core-ajax组件从DB(在此示例中为JSON)获取project_location
2. 使用google-map组件显示带有标记的地图
3. 用户拖动市场时，请使用core-ajax将新位置保存到DB

问:如何使google-map组件在AJAX请求完成之前等待其呈现?

Q: How to make google-map component to wait with it's rendering until AJAX request is finished?

当前出现此错误: 在观察者回调期间捕获到异常:TypeError:纬度必须是一个数字"，我认为这是因为在启动{{project_location}}之前呈现了google-map.

Currently this error is appearing: "Exception caught during observer callback: TypeError: latitude must be a number", and I assume that is because google-map is rendered before {{project_location}} is initiated.

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

推荐答案

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

I think the cleanest approach is not to think about this as a timing issue with <core-ajax>. Fundamentally, the problem is that you don't want to include the <google-map> element on your page until there's a value for project_location. In your snippet, the project_location value comes from <core-ajax>, but you could easily imagine a different implementation in which project_location is populated via some other means.

因此，如果您以这种方式考虑，那么有意义的是将<google-map>包装在条件模板中，该模板检查project_location的值:

So, if you think about it that way, what would make sense is to wrap the <google-map> in a conditional template that checks for a value of project_location:

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

这篇关于Polymer，如何在渲染其他元素之前等待core-ajax完成?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！