Search code examples
javascriptpolymer-1.0polymer-elements

How get the value of this Polymer element?


I have a simple Polymer element, that I use in a dom-repeat template.

<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="flow-element" attributes="name kind">
<template>
  <paper-material class="flow" elevation="1">
      <span>
        //delete button
        <paper-button class="delete" on-click="handleClick({{name}})">
          <iron-icon  icon="delete" ></iron-icon>
        </paper-button>
      </span>
    <paper-item id="name">{{name}}</paper-item>
    <paper-item id="kind">{{kind}}</paper-item>
  </paper-material>
  <!-- data bindings in local DOM -->
</template>

<script>
Polymer({
  is: 'flow-element',
  handleClick: function(name) {
    console.log('clicked: ');
    // remove the item 
    delete flowListID.flowDictionnary[name];
  }
});
</script>
</dom-module>

How can I access the name value so I can remove it from the flowDictionnary dictionary ? I tried to do it using JQuery but I don't know how insert the Jquery code inside the Polymer({...}) function. And yes, I'm new to web dev.


Solution

  • This should work.

    <link rel="import" href="../../bower_components/polymer/polymer.html">
    <dom-module id="flow-element">
    <template>
      <paper-material class="flow" elevation="1">
          <span>
            //delete button
            <paper-button class="delete" on-click="handleClick">
              <iron-icon  icon="delete" ></iron-icon>
            </paper-button>
          </span>
        <paper-item id="name">{{name}}</paper-item>
        <paper-item id="kind">{{kind}}</paper-item>
      </paper-material>
      <!-- data bindings in local DOM -->
    </template>
    
    <script>
    Polymer({
      is: 'flow-element',
      properties:{name:{type:String},kind:{type:String}}
      handleClick: function() {
        console.log('clicked: '+this.name);
        //if flowListID is a global variable declared outside of your element
        // you can access it anywhere
        // in other case you can pass this variable to this element and refeer   
        //  it using this. As follows: delete this.flowListID.flowDictionnary[name]; 
        // remove the item 
        //delete flowListID.flowDictionnary[name];
      }
    });
    </script>
    </dom-module>