Question

我想创建从请求中获取数据的web组件。所以，我已经做过：它在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。以下可能有助于您的要求。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() {return {};}这将解决空对象。（这里不是那么重要但只是被告知）同时将iron-input元素添加到项目中，例如：<link rel="import" href="bower_components/iron-input/iron-input.html"> DEMO nesciunt quas odio :))

从Web组件获取数据，该组件包含在另一个Web组件中。聚合物

1 个答案: