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

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

我正在尝试在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

最佳答案:

5 个答案:

答案 0 :(得分:7)

您最好的选择是分开您的疑虑。首先,您的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-servicepaper-progress不必彼此了解任何内容,并且应该在应用程序的其他位置更具可组合性。

答案 1 :(得分:3)

最后,我能够使用@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的答案不会像现在这样有效。我不得不做一些改变:

  1. loading请求被触发之前,明确地将true属性的值设置为iron-ajax
  2. 触发loading事件时,明确将false的值设置为on-response
  3. 为了实现这一目标,我删除了loading行更改了@Zikes answer的readOnly: true;属性。
  4. 使用@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的答案也应该有效,我是那个未能正确实现它的人,所以我会接受它作为正确答案。

    答案 2 :(得分:2)

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

    答案 3 :(得分:0)

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

    注意:非常黑客

    我通过覆盖默认的generateRequest()方法,添加了一些内容。

    &#13; &#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; &#13;

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

    &#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; &#13; &#13;

    答案 4 :(得分:0)

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

    默认情况下,加载

    时进度不确定
    <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);
    
    本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复