javascript - Send object with on-click functions of Polymer - Stack Overflow

admin管理员组

文章数量:1420540

I'm trying to send object as params of on-click functions, I already saw some posts using data-xxx to send values and retrieving them with the target.attributes field but that works only for strings and not objects.

Here is a jsbin showing the problem: ,console,output

There is a solution, even though its terrible, by using JSON.stringify to send the data and retrieving them with JSON.parse: ,console,output

Is there a better way?

In a perfect world, I would like it to work as Angular by passing parameters to a function directly inside the HTML call...

EDIT

I opened an issue on polymer project about this problem.

I'm trying to send object as params of on-click functions, I already saw some posts using data-xxx to send values and retrieving them with the target.attributes field but that works only for strings and not objects.

Here is a jsbin showing the problem: http://jsbin./tujekilafowa/1/edit?html,console,output

There is a solution, even though its terrible, by using JSON.stringify to send the data and retrieving them with JSON.parse: http://jsbin./lavocacadoti/1/edit?html,console,output

Is there a better way?

In a perfect world, I would like it to work as Angular by passing parameters to a function directly inside the HTML call...

EDIT

I opened an issue on polymer project about this problem.

• javascript
• html
• polymer

Share Improve this question Follow edited Aug 24, 2014 at 16:05 pikanezi asked Aug 19, 2014 at 9:44 pikanezipikanezi 1,1381313 silver badges1313 bronze badges 5

• I encountered this situation before. And, the only sane way that I could find was storing the objects in a collection or an array passing the 'id' of that particular object to the onClickFunction and retrieving it back from the array. – Vikram Deshmukh Commented Aug 19, 2014 at 10:03
• Could you provide an example of your method please? – pikanezi Commented Aug 19, 2014 at 10:25
• Here's a sample in which the onclick functions passes the index of the location at which the element is present. You can easily tweak the code to instead send 'id' or some other unique attribute of the object and then in the handler function identify the object by looping over your array of items. – Vikram Deshmukh Commented Aug 19, 2014 at 13:59
• I get the idea, it is "sane" but far from ideal. I guess Polymer is still too young to cover every use case. – pikanezi Commented Aug 19, 2014 at 15:14
• 1 I cant see your exact use case but what about using the sender.templateInstance.model data? lke this jsbin./codefapebe/1/edit?html,console,output – Peter Flannery Commented Jan 5, 2015 at 15:28

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Taking Peters answer above, this works for me (if it is enough to access the model)...

Polymer Element Template:

<template>
    <template repeat="{{ address in addresses }}">
        <paper-button label="-" on-click="{{ callback }}">less</paper-button>
    </template>
</template>

The Polymer Callback looks like this:

Polymer({
    callback: function (event, detail, sender) {
        console.log(sender.templateInstance.model.address);
    }
});

本文标签： javascriptSend object with onclick functions of PolymerStack Overflow