CODEWITHSUNDEEP
polymerpolymer-1.0
Ankur Marwaha
Ankur Marwaha

Reputation: 1885

Weird behaviour of observers in polymer?

I have a list of questions on the way my code is behaving, with regards to observers

QUESTIONS

1 - Why is the observer alerting when i refresh the page ?

2 - Why am i getting the alert twice when i refresh the page ?

3 - Why the value in alerts vary,

a - first alert - [1,2,3,4,5]

b - secon alert - 1,2,3,4,5

4 - i don't what the observer being called untill unless something is changed manualy, i don't want it to be called on the page refresh

5 - What does ::input do ?

CUSTOM ELEMENT

<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="icon-toggle-second-demo">
  <template>
    <style>

    </style>
  <br>
    <input type="text" value="{{first::input}}" > 
      second element
    <button>Reset</button>
    {{first}}
      {{asdf}}

  </template>

  <script>
    Polymer({
      is: "icon-toggle-second-demo",
      properties: {
        'first': {
            type: Array,
            reflectToAttribute: true,
            value: "[1,2,3,4,5]"
        },
        'second': {
            type: String,
            notify: true,
            readOnly: false,
            value: "default"
        }
      },
        observers:[
            'changedEvent(first.*, 0)', 'con()'
        ],
        changedEvent: function(changeRecord, index){
            alert(changeRecord.base);
        },
        con: function(){
            console.log("asdf");
        }

    });
  </script>
</dom-module>

PARENT HTML

<!doctype html>
<html>
  <head>
    <script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>

    <link rel="import" href="icon-toggle-second-demo.html">
    <style is="custom-style">

    </style>
  </head>
  <body> 
      demo/index.html - parent <br>

   <icon-toggle-second-demo ></icon-toggle-second-demo>

      <script>
      </script>
  </body>
</html>

Upvotes: 0

Views: 829

Answers (1)

a1626
a1626

Reputation: 2964

1 - Why is the observer alerting when i refresh the page ?

When binding the observer Polymer will once call the observer as you have provided it some default value. As per polymer's documentation

Simple observers are fired the first time the property becomes defined (!= undefined), and on every change thereafter, even if the property becomes undefined.

2 - Why am i getting the alert twice when i refresh the page ?

This should be because when you ask Polymer to reflect a property as attribute it tries to sync value between attribute and property. In case of Array/Object as values in attribute are different object then that in property observer gets called upon

3 - Why the value in alerts vary,

That is because first time it is getting interpreted as String(as defined by your value property) and second time its getting interpreted as Array(As per your type property)

4 - i don't what the observer being called until unless something is changed manually, i don't want it to be called on the page refresh

Yes it is possible, you'll have to use simple observer in order to do that

5 - What does ::input do ?

::input helps Polymer to bind non-polymer elements. As a non-Polymer element does not inform when there value changes Polymer uses this annotation to mark properties that needs to be observed.

Below are some of my observation from your code

  • Why is first of type Array? How will you take array from input tag. As far as i can think input tag will only give you String as input
  • Why are you using reflectToAttribute. As per Polymer's documentation ReflectToAttribute is very costly. So until you have a reason to use avoid using it
  • You don't need to keep properties name in quotes. It should be first not 'first'
  • You have named first as Array but you've assigned it String value.
  • You should check out Polymer's documentation or some other tutorial for better understanding of how to work with Polymer.

Upvotes: 1

Related Questions