如何获得这个Polymer元素的价值?

时间:2016-01-12 21:36:41

标签: javascript polymer-1.0 polymer-elements

我有一个简单的Polymer元素,我在dom-repeat模板中使用。

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

如何访问名称值,以便将其从flowDictionnary词典中删除?我尝试使用JQuery,但我不知道如何在Polymer({...})函数中插入Jquery代码。是的,我是web dev的新手。

1 个答案:

答案 0 :(得分:0)

这应该有用。

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