How to pass a parameter to a function in Polymer

Question

I'm trying to call a function and pass a parameter but it gives error that function is not defined. I suppose it's not the proper way to pass argument.

//it's a big component with many methods

updateData: function(id) {
  console.log(id);
  }

<div class="basic">
  <preview-list class="profileList">
    <template is="dom-repeat" items="{{ followers }}">
      <preview-profile profile$="{{ item }}">
        <div class="connectWrapper">
          <template is="dom-if" if="{_computeIsNotConnected(item.isConnection, item.isConnection2)}}">
            <custom-button on-tap="[[updateData(item.id)]]"></custom-button>
          </template>
        </div>
      </preview-profile>
    </template>
  </preview-list>
</div>

It shows the following error : listener method `[[updateData(item.id)]]` not defined I tried with curly braces too. How could I pass parameter to a function?

Shirin Safaeian · Accepted Answer · 2017-01-10T21:34:00.003

2

You must use the name of your function and get your object from event parameter:

<template is="dom-repeat" items="{{ data }}">
  <custom-button on-tap="updateData"></custom-button>
</template>

And define your event handler like this:

updateData: function(event) {
  console.log(event.model.item.id);
}

Update

as you are using dom-if inside dom-repeat, it's a bug (https://github.com/Polymer/polymer/issues/2574)

you can either use hidden$="{{_computeIsNotConnected(item.isConnection, item.isConnection2)}}" instead of dom-if template,

Or use this code snippet instead:

<template id="repeater" is="dom-repeat" items="{{ data }}">
  <custom-button on-tap="updateData"></custom-button>
</template>

updateData: function(event) {
  console.log(this.$.repeater.modelForElement(event.target));
}

edited Jan 10 '17 at 21:34

answered Jan 10 '17 at 20:43

Shirin Safaeian

950
6
18

I dont't have `item` in event.model. I have `e.model.__data__` property but it has all items not currently clicked. – ivva Jan 10 '17 at 21:05
Which version of polymer are you using? is it 1.0? – Shirin Safaeian Jan 10 '17 at 21:07
do you use "as" in your dom-repeat? – Shirin Safaeian Jan 10 '17 at 21:11
No, as `item` is default I know. – ivva Jan 10 '17 at 21:12
This `custom-element` is wrapped in another element if it is important. I'll add in it my question. – ivva Jan 10 '17 at 21:15
I have forgotten to add the inner `template is="dom-if"` in my question. This causes the problem. If I remove it, it works fine but how could I use it? – ivva Jan 10 '17 at 21:25

score 1 · Answer 2 · edited May 23 '17 at 12:07

1

Polymer doesn't want you to pass an argument here. Instead you should access the data you need via the model... e.model.get('item.id'). See this answer for more: https://stackoverflow.com/a/40205828/2718998

edited May 23 '17 at 12:07

Community

1
1

answered Jan 10 '17 at 20:43

Tim Mickey

361
3
10

Thank you for these useful links and comments. Maybe I just miss something. – ivva Jan 10 '17 at 21:18

How to pass a parameter to a function in Polymer

2 Answers2