将 url 属性分配给 Polymer iron-ajax 仅适用于 Blink 浏览器

Question

我正在使用 Polymer 1.0 根据用户的位置使用 iron-ajax 发出 API 请求。

在 app.js 我有以下块。

app.addEventListener('dom-change', function() {
console.log('Our app is ready to rock!');

var working = Polymer.dom(document).querySelector('#refresh-button');
var locationToast = Polymer.dom(document).querySelector('#toast');
var sightingsAjax = Polymer.dom(document).querySelector('iron-ajax#sightings');
var hotspotsAjax = Polymer.dom(document).querySelector('iron-ajax#hotspots');

function getLocation() {

  working.setAttribute('class', 'spin');  

  function success(position) {

    app.initialPosition = [position.coords.latitude,position.coords.longitude];
    console.log(app.initialPosition);

    app.apiRecent = 'http://ebird.org/ws1.1/data/obs/geo/recent?fmt=json&back=2' + 
      '&lat=' + app.initialPosition[0] + '&lng=' + app.initialPosition[1];
    console.log(app.apiRecent);

    app.apiHotspots = 'http://ebird.org/ws1.1/ref/hotspot/geo?dist=20&back=2&fmt=json' + 
      '&lat=' + app.initialPosition[0] + '&lng=' + app.initialPosition[1];
    console.log(app.apiHotspots);

    locationToast.text = 'Location acquired!';
    locationToast.show();

    working.removeAttribute('class'); 

    sightingsAjax.url = app.apiRecent;
    hotspotsAjax.url = app.apiHotspots;

  }

  function error() {

    working.removeAttribute('class');
    working.setAttribute('icon', 'error'); 

    locationToast.text = 'Unable to determine location.' + 
        'Please check your settings and try again.';
    locationToast.duration = 0; 
    locationToast.show(); 

  }

  navigator.geolocation.getCurrentPosition(success,error,{enableHighAccuracy: true});

}

getLocation();

app.refreshLocation = function() {
  console.log('Refreshing user location...');
  getLocation();
};

});

并且在我的 index.html 文件中，我有带空 url 属性的 iron-ajax 元素。 url是根据用户的位置坐标创建和添加的。

<section data-route="sightings">
            <template is="dom-bind">
                <iron-ajax
                  id="sightings"
                  auto
                  url=""
                  handle-as="json"
                  last-response="{{response}}"></iron-ajax>
                <iron-list>
                <template is="dom-repeat" items="{{response}}">
                  <div class="row">
                      <h4 class="title">[[item.comName]]</h4>
                      <div class="latin">[[item.sciName]]</div>
                      <div class="loc">Last spotted at <span>[[item.locName]]</span></div>
                      <div class="time">[[item.obsDt]]</div>
                  </div>
                </template>
                </iron-list>
            </template>      
</section>

这在 Chrome 和 Opera（Blink 浏览器）中运行良好，但在 Safari 和 Firefox（均为最新版本；尚未在 IE 中测试）中失败。结果是一个空 iron-list，所以基本上浏览器无法 request/return 受影响浏览器中的 API 数据。

Safari 给我这个错误：TypeError: Attempted to assign to readonly property. success app.js:63

Firefox 说：TypeError: sightingsAjax is undefined

值得注意的是，地理位置、界面、路由和 toasts 在所有浏览器中都可以正常工作。此外，手动设置 iron-ajax url 属性也可以正常工作。只是 url 属性的动态设置在 Firefox 和 Safari 中似乎失败了。

Answer 1

回答我自己的问题。我可以直接在 success() 回调中操作 url 属性，而不是将所选元素存储在它们自己的变量中...

Polymer.dom(document).querySelector('#sightings iron-ajax').url = app.apiRecent;
Polymer.dom(document).querySelector('#hotspots iron-ajax').url = app.apiHotspots;

将 url 属性分配给 Polymer iron-ajax 仅适用于 Blink 浏览器

Assigning url property to Polymer iron-ajax only works in Blink browsers

javascript

cross-browser

web-component

polymer

polymer-1.0

将 url 属性 分配给 Polymer iron-ajax 仅适用于 Blink 浏览器

Assigning url property to Polymer iron-ajax only works in Blink browsers

javascript

cross-browser

web-component

polymer

polymer-1.0

将 url 属性分配给 Polymer iron-ajax 仅适用于 Blink 浏览器