How can i bind a dynamic function within a polymer component?

Question

As far as my Polymer knowledge goes I can

bind a function using the "on-*" syntax to a webcomponent method
bind a function available in the global window namespace using vanilla html js binding (using onClick="...")

But I want to bind a function (provided as property of datamodel objects) to the webcomponent template. One sidenote : Moving the datamodel objects to the global javascript namespace (i.e. window.*) is not an option.

The example below does'nt work but reflects exactly my use case :

...
Polymer('x-foo', {

    items : [
      ...,
      {
        label  : "ExampleCommand",
        action : function() {
            // do something
        }            
      }
      ...
    ]
})
...
<template>
    <template repeat="{{item in items}}">
        <paper-button onClick="{{item.action}}">
            {{item.label}});
        </paper-button>
    </template>
</template>
...

one more question if someone has an idea how to solve the question above) : how can i provide additional arguments to function ?

Any help is appreciated :-)

is http://stackoverflow.com/questions/28104808/polymer-function-call-with-parameters the only workaround ? — lgersman, Feb 06 '15 at 11:11
one note: `onClick` should be `on-click` if you want Polymer to bind it to your element object. `onClick` is the DOM event, `on-click` is the Polymer event (which also happens to fire an `onClick`. — Fuzzical Logic, Feb 06 '15 at 15:34
I know. But "on-click" (or better "on-tap") can only be used to map directly to a webcomponent property method, but not to a function in a sub structure like in the case i described. thats why i asked the question, dude. — lgersman, Feb 07 '15 at 14:09
any particular reason you are not using window registered functions? that is what i am doing so far, passing a function name as an element property and then calling window[this.functionname](e,d,s) - any problem with that? — Fausto R., May 15 '15 at 11:46

score 8 · Answer 1 · answered Feb 06 '15 at 21:13

I had to ask the team about this because it's kinda confusing. Declarative event "bindings" are not the same thing as a Polymer expression. Unfortunately, both event bindings and Polymer expressions use the {{ }} syntax, which implies they work the same. They don't. The scope of event bindings is the element itself, whereas as an expression is scoped to the model for the template instance.

In Polymer 0.8, I believe the syntax has changed, so event bindings no longer use {{ }}. Hopefully that will clear it up a bit.

To achieve the effect you want, you can define a method on the element, which looks at the event target, grabs its model, and calls the function you've defined.

<polymer-element name="x-foo">
  <template>
    <template repeat="{{items}}">
      <button on-click="{{doAction}}">{{label}}</button>
    </template>
  </template>
  <script>
    Polymer({
      items: [
        {
          label: 'ExampleCommand',
          action: function() {
            alert('hello world');
          }
        },
        {
          label: 'AnotherCommand',
          action: function() {
            alert('another command');
          }
        }
      ],
      doAction: function(e) {
        e.target.templateInstance.model.action();
      }
    });
  </script>
</polymer-element>

Here's the example running on jsbin

what you describe is the answer in http://stackoverflow.com/questions/28104808/polymer-function-call-with-parameters already proposed as workaround in my first comment. the question is : is there a more elegant solution which looks not like workaround for the limited options using polymer ? — lgersman, Feb 07 '15 at 14:11
I spoke with the Polymer team and the solution above was the advice I was given. — robdodson, Feb 11 '15 at 05:21

How can i bind a dynamic function within a polymer component?

1 Answers1

Linked