CODEWITHSUNDEEP
javascripthtmldata-bindingpolymerweb-component
Luke
Luke

Reputation: 5708

declared property being initialized multiple times when using data binding

Polymer v1.2.3

I am running into an issue with Polymer and I'm not sure if its a bug or not.

I have this property that I need to set to null after doing something with it in the ready call back, however it seems like when I am initializing the property via data binding, the property gets re-initialized after I set it to null.

Take the following example:

proxy-elm.html

<dom-module id="proxy-elm">
  <template>
    <x-foo it="[[prox]]"></x-foo>
  </template>
  <script>
    Polymer({
      is: 'proxy-elm',
      properties: {
        prox: String
      }
    });
  </script>
</dom-module>

x-foo.html

<dom-module id="x-foo">
  <template>
    <div>...</div>
  </template>
  <script>
    Polymer({
      is: 'x-foo',
      properties: {
        it: String
      },
      ready: function () {
        //some processing stuff
        console.log(this.it);
        this.it = '';
        setTimeout(function () {
          console.log("later -- " + this.it);
        }.bind(this), 3000);
      }
    });
  </script>
</dom-module>

Main.html

<proxy-elm prox="hi"></proxy-elm>

Console

=>hi
=>
=>later -- hi

This issue only occurs then the proxy element uses data binding. If I have the proxy element set it to an immediate, the console looks like:

=>hi
=>
=> later --

Which is the desired behavior.

What's up with this? I'm going mad!

Upvotes: 2

Views: 74

Answers (2)

Maria
Maria

Reputation: 5604

This is indeed confusing. However, when reading the documentation very carefully, I noticed that it only mentions local dom.

It is called after the element’s template has been stamped and all elements inside the element’s local DOM have been configured (with values bound from parents, deserialized attributes, or else default values) and had their ready method called.

So the local children of your element are guaranteed to have been initialized, but not necessarily the attributes of your element. I noticed that wrapping the code in an async helps.

  ready: function () {
    //some processing stuff
    console.log(this.it);
    this.async(function(){
      this.it = '';
    });
    setTimeout(function () {
      console.log("later -- " + this.it);
    }.bind(this), 3000);
  }

Upvotes: 1

Pascal Gula
Pascal Gula

Reputation: 1173

This is probably due to the initialization order (cf. Documentation)

You can try in the ready() function from your proxy to set the value of x-foo as desired like this:

<dom-module id="proxy-elm">
  <template>
    <x-foo id="xFoo" it="[[prox]]"></x-foo>
  </template>
  <script>
    Polymer({
      is: 'proxy-elm',
      properties: {
        prox: String
      },
      ready: function () {
        this.$.xFoo.it = '';
      }
    });
  </script>
</dom-module>

and keep the ready() function of x-foo for your specific processing!

Upvotes: 1

Related Questions