Polymer 1.0: how to access a property value inside a function

Question

How can I access the value of a property inside a function? Here is the property

properties:{
  name: {type: String}
}

Run codeHide result

<my-element name="Subrata"></my-element>

Inside <my-element>I have a function like this:

Approach No. 1

<dom-module id="my-element">
  <template>
    ...
    ...
  </template>

  <script>
  (function () {
    is: 'my-element',
    properties:{
      name: {type: String}
    },
  
    getMyName: function(){
      return this.name;
    }
  })();
  </script>
</dom-module>

Run codeHide result

My other approach was to put the value inside the element, but that didn't work either.

Approach # 2

<dom-module id="my-element">
  <template>
    <!-- value of name is rendered OK on the page -->
    <p id="maxp">{{name}}</p>
  </template>
  
  <script>
    (function() {
      is: 'my-element',
      properties: {
        name: {type: String}
      },
      getMyName: function(){
          var maxpValue = this.$$("#maxp").innerHTML;
          return  maxpValue;
      }
    })();
  </script>
</dom-module>

Run codeHide result

How can i do this? Please, help.

Thanks in advance

Answer 1

Instead of using a self-running anonymous function, you should use a function Polymer. Change (function() { ... })();in your code to read Polymer({ ... });.

Here is an example:

<dom-module id="my-element">
  <template>
    ...
  </template>
</dom-module>

<script>
  Polymer({
    is: 'my-element',

    properties: {
      name: {
        type: String
      }
    },

    getMyName: function() {
      return this.name;
    }
  });
</script>

Polymer, . , Polymer.

Answer 2

this.name