Javascript 在装入纸张时显示聚合物不确定的纸张进度

当一个

ironajax

请求正在进行，但没有成功时，我试图显示一个论文进度。下面是一个自定义元素

get products service

的代码，它承载

iron ajax

请求，以及一个

products list

的代码，它承载

论文进度

这是整个

产品列表

dom模块

：

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

---

你最好的选择是分开你的顾虑。首先，您的

获取产品服务

：

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

---

这样一来，

get products service

和

paper progress

就不必相互了解，应该在应用程序的其他地方更易于组合。

@Zikes有正确的答案。我在这里补充了一个完全有效的实现（仅针对Chrome，x-platform需要一些调整）：

聚合物({
特性：{
产品：{
通知：正确，
值：null
}
},
就绪：函数（）{
//这一点只是因为它太快了，看不见
this.async（函数（）{
this.go=true；
}, 1000);
}
});
{{products}}
聚合物（{}）；

最后，我使用@Zikes和@Scott answers的组合实现了这一功能。首先，我按照@Zikes的建议分离了关注点，因此我将其放在

产品列表

元素中

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

获得查看

进度条的机会

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

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


：主持人{
显示：无；
}
聚合物（{is:'获取产品服务'，
特性：{
装载：{
类型：布尔型，
通知：正确，
值：false
}
},
//关于响应回调
productsLoaded:函数（请求）{
这一点：加载=错误；
},
//生成ajax请求的观察者方法
属性就绪：函数（第页）{
//在生成请求之前，将loading的值设置为true
这是。加载=真；
//放慢速度以获得查看进度条的机会
this.async（函数（）{
这是$.productsajax.generateRequest（）；
}, 5000);
}
});

我相信@Zikes-answer也应该起作用，我是未能正确实现它的人，因此我将接受它作为正确答案。
我知道时间有点晚，但我遇到了类似的困境，决定公开API。
通过这种方式，我可以显示XHR请求的确切进度百分比

注：非常粗糙
为此，我覆盖了默认的generateRequest（）方法，并添加了一些内容。
app.$.productsajax.generateRequest=function（）{
var请求=（document.createElement（'iron-request'）；
var requestOptions=this.toRequestOptions（）；
///**=============================================///
///**添加以公开进度-超级黑客**///
var me=这个；
request.ap_obs=功能（a）{
me.progress=a；
me.\u通知变更（“进度”）
};
请求。_addObserverEffect（“进度”、“ap_obs”）
///**===========================================**///
this.activeRequests.push（请求）；
请求。完成。然后(
这是我的责任
).接住(
this.\u handleError.bind（this，request）
).那么(
this.\u discardRequest.bind（this，request）
);
request.send（requestOptions）；
此._setLastRequest（请求）；
这是._设置加载（真）；
这是一场火灾（“请求”{
请求：请求，
选项：请求选项
});
返回请求；
}
在我的例子中，我想让进度条在菜单区域中始终可见，并在执行可能需要一些时间的工作时从不同的元素启动/停止进度条

加载时，默认情况下进度是不确定的

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

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

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

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

当我尝试这样做时，进度条根本不会出现。是的，iron ajax请求工作正常，并返回预期的响应。另外，
get products服务
不在
dom绑定
模板中，而是在列表模板中，我不确定这是否会对你的答案产生任何影响，尽管我在
dombind
和列表模板中都尝试了
dom if
模板，但两个模板中都没有出现进度条。你能提供一个更完整的示例，说明
获取产品服务
在页面上与之相关的位置吗
论文进度
？我已经用
获取产品服务
和
论文进度
@OptimusPette的位置编辑了这个问题。我已经更新了我的答案，请再看一看。您的
论文进度
和
获取产品服务
都有一个“加载”id。这可能会导致意外行为。@Zikes我没有注意到，我已经更改了它，但仍然无法工作。您能否告诉我，为什么Zikes在加载请求时仍无法将
loading
属性设置为true？这是为什么“非常粗糙”？它是不安全的还是“快速且肮脏”的解决方案？此解决方案的问题在于它假定
generateRequest
的实现永远不会改变。这意味着对组件的任何更新都将被此黑客所覆盖。（即，这是一个快速而肮脏的解决方案）
this.async(function() {
        this.$.productsajax.generateRequest();
      }, 5000);

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

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