Question

我正在使用Polymer 1.0来创建Web应用程序。

我有各种元素做一个或多个iron-ajax调用，我有另一个元素来显示加载覆盖。但是在我目前的解决方案中，我已经为每个执行ajax调用的元素添加了加载覆盖，其逻辑显示与否。

<dom-module id="backend-call-application">
  <template>
    <iron-ajax id='loadA' loading="{{_loadingA}}" ...></iron-ajax>
    <iron-ajax id='loadB' loading="{{_loadingB}}" ...></iron-ajax>

    <loading-overlay id="loadingOverlay" with-backdrop></loading-overlay>

  </template>

  <script>
    Polymer({

      is: 'backend-call-application',

      observers:[
        "_isXhrLoading(_loadingA,_loadingB,....)"
      ],

      _isXhrLoading: function() {
        for (var i = 0; i < arguments.length; i++) {
          if (arguments[i]) {
            this.$.loadingOverlay.open()
            return;
          }
        }
        this.$.loadingOverlay.close()
      }
    });
  </script>
</dom-module>

现在我的问题是，显示这种加载覆盖的最佳方法是什么？

我的一个想法是，在加载叠加层中有类似观察者的东西。因此，每个执行请求的元素都会将其属性绑定到观察者。这些属性可以存储在一个数组中，每次更改时，loading-overlay检查是否至少有一个属性设置为true。当一个或多个属性为true时，将打开加载覆盖，当所有请求完成加载时，它将被关闭。

另一个想法是在元素开始/停止加载时使用事件来告诉加载覆盖。但问题是，我同时有多个请求（第一个请求关闭覆盖，但页面尚未完成加载）。

编辑：

loading-overlay是包含IronOverlayBehavior的元素。

<link rel="import" href="../../../bower_components/polymer/polymer.html">

<link rel="import" href="../../../bower_components/iron-overlay-behavior/iron-overlay-behavior.html">
<link rel="import" href="../../../bower_components/paper-spinner/paper-spinner.html">

<dom-module id="loading-overlay">
  <template>
    <paper-spinner active="true"></paper-spinner>
  </template>
  <script>
    Polymer({
      is: 'loading-overlay',
      behaviors: [
        Polymer.IronOverlayBehavior
      ]
    });
  </script>
</dom-module>

Answer 1

使用一个属性加载而不是2 !!

ngDoCheck() {
    if(model.value == 'specific value') {
       cd.reattach();
       cd.detectChanges(); //run cd once again for enabled component
       cd.detach(); //detached component
       //or
       //cd.markForCheck();
    }
}

使用某个属性将加载值绑定到loading-overlay，并且当加载为true时将显示加载器

<iron-ajax id='loadA' loading="{{_loading}}" ...></iron-ajax>
<iron-ajax id='loadB' loading="{{_loading}}" ...></iron-ajax>

因此，每次制作任何ajax时，_loading将变为true，因此显示加载器

Answer 2

我认为你唯一可以缩短的是_isXhrLoading观察者。

_isXhrLoading: function() {
    if(Array.from(arguments).indexOf(true) >= 0) {
        this.$.loadingOverlay.open()
    } else {
        this.$.loadingOverlay.close()
    }
  }

处理Polymer

2 个答案: