javascript - 从 Web 组件获取数据，该数据包含在另一个 Web 组件中。 polymer

Question

我想制作从请求获取数据的网络组件。所以，我已经做了:它正在将请求保存在 IndexedDB 中，工作正常。

    <iron-ajax id="request"
               method="GET"
               headers='{"X-Requested-With": "XMLHttpRequest"}'
               verbose="true"
               url="https://jsonplaceholder.typicode.com/posts/{{token}}"
               handle-as="json"
               last-response="{{newData}}"
    ></iron-ajax>
    <app-indexeddb-mirror
            id="AppIndexedDBMirror"
            key="{{token}}"
            data="{{newData}}"
            persisted-data="{{lastData}}"
            log="true"
    >
    </app-indexeddb-mirror>

</template>
<script>
    class GetConfig extends Polymer.Element {
        static get is() { return 'get-config'; }
        static get properties() {
            return {
                token: {
                    type: String,
                    value: "",
                },
                lastData:{
                    type:Object,
                    value:"",
                    notify:true,
                },
                newData:{
                    type:Object,
                    value:""
                },

            }
        }
        ready() {
            super.ready();
            this.$.request.generateRequest();
        }

    }

    window.customElements.define(GetConfig.is, GetConfig);

</script>

接下来，我想将此组件包含在另一个组件中:

<dom-module id="my-view1">
  <template>
    <style include="shared-styles">
      :host {
        display: block;

        padding: 10px;
      }
    </style>

    <get-config id="gc" token="5"></get-config>
    <input id="inp" value="">
    <button on-click="getConfiguration">Press</button>
  </template>
  <script>
    class MyView1 extends Polymer.Element {
      static get is() { return 'my-view1'; }
        constructor(){
          super();
        }
        getConfiguration(){
            this.$.inp.value=this.$.gc.lastData.title;
        }
    }
    window.customElements.define(MyView1.is, MyView1);

总的来说，如果我按下按钮，它就会实现我想要的效果，但我需要使其自动执行。我的意思是应该在页面加载时完成。如何做到这一点？

P.s.我知道如何在一个组件中实现这一点，但我想在两个不同的组件中实现它。

Answer 1

实际上，这是 Polymer 方式非常简单的方法。为此，请阅读data system在 polymer 。下面可能会帮助您的要求。 my-view1 :

...
<get-config id="gc" token="5" last-data="{{lastData}}"></get-config>
   <!--Here you do not need button or js code to bind value between your custome component and input value. Here will be automatically will done upon your component loaded.--> 
   <iron-input bind-value="{{lastData.title}}"> 
    <input id="inp" value="{{lastData.title}}" /> 
   <iron-input>
...

在您的get-config组件，添加 lastData和newData值为value:""意味着它是 String值(value)。删除value:""或者只是 value() {return {};}这将分配空对象。 (这里不是那么重要，只是被告知)另添加iron-input您的项目的元素如下: <link rel="import" href="bower_components/iron-input/iron-input.html"> DEMO nesciunt quas odio :))