Question

我正在尝试在iron-ajax请求正在进行时显示文件进度而没有成功。以下是托管get-products-service请求的自定义元素iron-ajax和托管products-list的{{1}}的代码。

这是整个paper-progress products-list：

dom-module

这是整个<dom-module id="product-list"> <style> :host { display: block; width: 100%; text-align: center; } product-card { margin-left: 10px; margin-bottom: 30px; } </style> <template> <template is="dom-if" if="{{loading}}"> <paper-progress value="10" indeterminate="true" style="width:100%;"></paper-progress> </template> <paper-button id="previous" on-tap='previousPage'>Previous</paper-button> <paper-button id="next" on-tap='nextPage'>Next</paper-button> <get-products-service products="{{products}}" id="productservice" page="{{page}}" loading="{{loading}}"></get-products-service> <div> <template is="dom-repeat" items="{{products}}"> <product-card on-cart-tap="handleCart" product="{{item}}"> <img width="100" height="100"> <h3>{{item.name}}</h3> <h4>{{item.display_price}}</h4> </product-card> </template> </div> </template> </dom-module> <script> (function() { Polymer({ is: 'product-list', properties: { page: { type: Number, notify: true, value: 1 } }, handleCart: function(event) { }, previousPage: function(event){ this.page = --this.page; console.log("page: "+this.page); }, nextPage: function(event){ this.page = ++this.page; console.log("page: "+this.page); } }); })(); </script>

get-products-service

Answer 1

您最好的选择是分开您的疑虑。首先，您的get-products-service：

<dom-module id="get-products-service">
  <style>
    :host {
      display: none;
    }
  </style>
  <template>
    <iron-ajax id="productsajax"
      url="http://localhost:3003/api/products"
      method='GET'
      loading="{{loading}}"
      handleAs="json">
    </iron-ajax>
  </template>

  <script>
    Polymer({
      is: 'get-products-service',

      properties: {
        loading: {
          type: Boolean,
          readOnly: true,
          notify: true,
          value: false
        }
      }
    });
  </script>
</dom-module>

然后，在product-list：

中

<template>
  <template is="dom-if" if="{{loading}}">
    <paper-progress value="10" indeterminate="true" style="width:100%;"></paper-progress>
  </template>
  <get-products-service loading="{{loading}}"></get-products-service>
</template>

这种方式get-products-service和paper-progress不必彼此了解任何内容，并且应该在应用程序的其他位置更具可组合性。

Answer 2

最后，我能够使用@Zikes和@Scott答案的组合工作。首先，我按照@Zikes的建议分离了这些问题，所以我把它放在product-list元素中。

<template>
  <template is="dom-if" if="{{loading}}">
    <paper-progress value="10" indeterminate="true" style="width:100%;"></paper-progress>
  <template>
  <get-products-service loading="{{loading}}"></get-products-service>
</template>

在get-products-service元素中，我必须进行一些更改才能使其正常工作。出于某种原因，我不会将loading设置为iron-ajax设置为true。因此@Zikes的答案不会像现在这样有效。我不得不做一些改变：

在loading请求被触发之前，明确地将true属性的值设置为iron-ajax。
触发loading事件时，明确将false的值设置为on-response。
为了实现这一目标，我删除了loading行更改了@Zikes answer的readOnly: true;属性。

使用@Scott建议，我通过使用：

this.async(function() {
        this.$.productsajax.generateRequest();
      }, 5000);

有机会看到progress-bar。

生成的get-products-service元素如下所示：

<dom-module id="get-products-service">
  <style>
    :host {
      display: none;
    }
  </style>
  <template>
    <iron-ajax id="productsajax"
      url="http://localhost:3003/api/products"
      method='GET'
      on-response='productsLoaded'
      handleAs="json">
    </iron-ajax>
  </template>
</dom-module>

<script>
  Polymer({is: 'get-products-service',
    properties: {
     loading: {
      type: Boolean,
      notify: true,
      value: false
      }
    },
    //on-response callback
     productsLoaded: function(request) {
         this.loading = false;
     },

   //An observer method where ajax request is generated
    attributesReady: function(page) {
      //set the value of loading to true just before generating request
      this.loading = true;
      //slow things to get a chance to see the progress-bar
      this.async(function() {
        this.$.productsajax.generateRequest();
      }, 5000);
    }

  });
</script>

我相信@Zikes的答案也应该有效，我是那个未能正确实现它的人，所以我会接受它作为正确答案。

Answer 3

@Zikes有正确的答案。我在这里补充一个完全有效的实现（仅适用于Chrome，x平台需要一些调整）：

<!doctype html>
<html>
<head>

  <meta charset="utf-8">

  <base href="http://milestech.net/components/">

  <link href="iron-ajax/iron-ajax.html" rel="import">
  <link href="paper-progress/paper-progress.html" rel="import">

</head>
<body>

  <use-service></use-service>

  <dom-module id="get-products-service">
    <template>

      <iron-ajax url="iron-ajax/bower.json" auto="{{go}}" handle-as="text" last-response="{{products}}"></iron-ajax>

    </template>
    <script>

      Polymer({

        properties: {
          products: {
            notify: true,
            value: null
          }
        },

        ready: function() {
          // this bit just because otherwise it's too fast to see
          this.async(function() {
            this.go = true;
          }, 1000);
        }
      });

    </script>
  </dom-module>

  <dom-module id="use-service">
    <template>

      <template is="dom-if" if="{{!products}}">
        <paper-progress value="10" indeterminate="true" style="width:100%;"></paper-progress>
      </template>

      <get-products-service products="{{products}}"></get-products-service>

      <pre>{{products}}</pre>

    </template>
    <script>

      Polymer({});

    </script>
  </dom-module>

</body>
</html>

Answer 4

我知道它有点晚了，但我遇到了类似的困境，并决定公开API。这样我就可以显示XHR请求的确切进度百分比。

注意：非常黑客

我通过覆盖默认的generateRequest（）方法，添加了一些内容。

＆＃13;

app.$.productsajax.generateRequest = function() {
  var request = (document.createElement('iron-request'));
  var requestOptions = this.toRequestOptions();
  ///**=============================================///
  ///**   Added to expose progress - Super Hacky  **///
  var me = this;
  request.ap_obs = function(a) {
    me.progress = a;
    me._notifyChange("progress")
  };
  request._addObserverEffect("progress", "ap_obs")
    ///**===========================================**///
  this.activeRequests.push(request);
  request.completes.then(
    this._boundHandleResponse
  ).catch(
    this._handleError.bind(this, request)
  ).then(
    this._discardRequest.bind(this, request)
  );
  request.send(requestOptions);
  this._setLastRequest(request);
  this._setLoading(true);
  this.fire('request', {
    request: request,
    options: requestOptions
  });
  return request;
}

＆＃13;

所以现在你的元素看起来像：

＆＃13;

<template>
  <iron-ajax url="iron-ajax/bower.json" progress="{{progress}}" loading="{{activePageReq}}" auto="{{go}}" handle-as="text" last-response="{{products}}"></iron-ajax>
  <paper-progress hide$="{{!activePageReq}}" value="{{progress.loaded}}" ,max="{{progress.total}}"></paper-progress>
</template>

＆＃13;

Answer 5

在我的情况下，我想保持进度条始终在菜单区域中可见，并在做一些可能需要一些时间的工作时从不同的元素开始/停止它。

默认情况下，加载

时进度不确定

<paper-progress id="working" indeterminate ></paper-progress>

我们有一个全局命名空间对象应用程序，我只需添加一个函数，如下所示

  app.working = function(flag){
    document.querySelector("#working").indeterminate = flag;
  };

在这种情况下，当初始加载完成后，我就这样做了

app.working(false);

它可以稍后从应用程序中的任何元素启动/停止，只需执行

即可

app.working(true);
// ... long process
app.working(false);

当加载铁-ajax时，显示聚合物不确定纸张的进展

5 个答案:

注意：非常黑客