CODEWITHSUNDEEP
javascriptpolymer
Nikita Vozisov
Nikita Vozisov

Reputation: 66

Get Data from web-component, which is included in another web-component. Polymer

I want to make web-component which gets data from request. So, I've already made: it's making request saves in IndexedDB, it works fine.

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

Next, i want to include this component in another one:

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

Totally, if I press the button it makes, what I want, but I need to make it automatic. I mean it should be done, when page is loaded. How to do this?

P.s. I know how to make this in one component, but I want to do it in two different ones.

Upvotes: 0

Views: 485

Answers (1)

Cappittall
Cappittall

Reputation: 3441

Actually, this is the very easy approach for Polymer way. For this, please read data system at polymer. Here below may help your requirement.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>
...

At your get-config component, Adding lastData and newData value as value:"" mean it is a String value. Remove value:"" or just value() {return {};} This will assing empty object. (Here not so important but just be informed) Also add iron-input element to your project something like : <link rel="import" href="bower_components/iron-input/iron-input.html"> DEMO nesciunt quas odio :))

Upvotes: 1

Related Questions