Question

我正在尝试使用 core-ajax 和 paper-toast 元素在ajax请求失败时显示toast。我创建了一个在 paper-toast 元素上调用show的处理程序。然而它仍然没有显示...... 我究竟做错了什么？有没有更好的方法呢？（也许对所有应用程序消息都有相同的toast元素）

这是我的自定义元素代码：

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/core-ajax/core-ajax.html">
<link rel="import" href="../bower_components/paper-toast/paper-toast.html">

<polymer-element name="fd-rest-element-service" attributes="fditems fdtype">
  <template>
    <style>
    :host {
      display: block;
    }
    paper-toast {
      z-index: 1000;
      bottom: 40px;
      left: 10px;
    }
    </style>
    <paper-toast id="toast" text="There was a problem loading {{fdtype}} data.">
    </paper-toast>
    <core-ajax id="ajax" 
      auto on-core-error="{{errorHandler}}"
      url="https://wrong.url.com:9113/{{fdtype}}/"
      disabled-on-core-response="{{elementsLoaded}}"
      response="{{fditems}}"
      handleAs="json"  withCredentials >
    </core-ajax>
  </template>
  <script>
  Polymer('fd-rest-element-service', {

    fdtype:'environments',

    created: function() {
      this.fditems = [];
    },

    elementsLoaded: function() {
      // Make a copy of the loaded data
      console.log(this.fdtype +" : "+ this.$.ajax.response);
      this.fditems = this.$.ajax.response.slice(0);

    },

    errorHandler: function(event){
      console.log(event);
      console.log(this.$.toast);
      this.$.toast.show();
    }
  });
  </script>
</polymer-element>

由于我没有控制台错误，并且记录的对象符合预期，我相信问题就出现了，因为该元素在由 core-animated-pages 管理的元素中使用，但未显示。有关如何创建可由我的应用程序中的其他元素访问的共享Toast元素的任何建议吗？

Answer 1

我最终在最外面的元素中创建 paper-toast 元素，然后通过 toast 属性传递给children元素。

下面是一些示例代码。在我的根元素中，我创建了一个由id引用的 paper-toast 元素，并分享＆＃34;自上而下＆＃34;在其他内在元素中。

<paper-toast 
  id="toast" 
  text="There was a problem loading data.">
</paper-toast>

<fow-login user="{{user}}" userPhoto="{{userPhoto}}"
    class="loginButton"
    toast="{{$.toast}}"
    token="{{token}}">
</fow-login>

在我的内心元素中，我使用它：

<polymer-element name="fow-login" attributes="toast user userPhoto globals appID token">
...
<script>
...
loginFail: function(event){
      console.log("Error:", event);
      if(this.toast){
        this.toast.text="There was a login problem.";
        this.toast.show();
      }
    },
...
</script>
</polymer-element>

纸吐司没有显示

1 个答案: