Assigning a function to published attribute

Question

I have a custom polymer element that is a form and goes something like this.

Dart script:

@CustomTag('my-form')
class MyForm extends PolymerElement {
    @published Function submitFunction;

    validateAndSubmit() {
        // validate
        submitFunction();
    }
}

HTML:

<polymer-element name="my-form">
    <template>
        <button id="submitButton" on-click="{{ validateAndSubmit }}">Submit</button>
    </template>
</polymer-element

When the submit button is clicked, the submit function will be called, but as you can see it needs to be set to something first. I am using this element multiple times in one page, and for each form I need it to do something different.

In my main I have this:

@CustomTag('my-form')
class MyCustomForm extends MyForm {
    // The below commented out line would work if I only had one form.
    // var submitFunction = submitForm1;

    submitForm1() {
        // do stuff with form 1
    }

    submitForm2() {
        // do stuff with form 2
    }
}

And in the HTML:

<my-form id="form1" submitFunction="{{ submitForm1 }}"></my-form>
<my-form id="form2" submitFunction="{{ submitForm2 }}"></my-form>

But this doesn't work. The submitForm functions don't run at all. Any suggestions?

score 1 · Answer 1 · answered Oct 05 '15 at 19:40

1

To initialize submitFunction programmatically, (for Polymer < 0.17.0), add the below.

@whenPolymerReady
onReady() {
    MyForm form1 = (querySelector("#form1") as MyForm);
    form1.submitTo = methodToCallOnSubmit();
    // same for form 2.
}

answered Oct 05 '15 at 19:40

maus

121
1
10

Günter Zöchbauer · Answer 2 · 2015-10-05T16:55:43.387

0

For Polymer you need to add a dash in the event name on-click instead of onclick.

Depending on the Polymer version you are using you need to annotate the functions with

@enventHandler // Polymer <= 1.0.0-rc.1
@reflectable // Polymer >= 1.0.0-rc.2

Polymer 1.0 is quite restrictive what is possible/allowed in binding expressions. The spaces might cause troubles too

"{{ submitForm1 }}"

try

"{{submitForm1}}" instead

edited Oct 05 '15 at 16:55

answered Oct 05 '15 at 16:15

Günter Zöchbauer

623,577
216
2,003
1,567

I have polymer: ">=0.15.1 <0.17.0" in my pubspec.yaml, but I think that's the Dart version? Tried without spaces but no luck. How would I set this programmatically? Like if I wanted to select my-form by ID and then set the submitFunction attribute programmatically, how would I do that and where would the code go? – maus Oct 05 '15 at 16:50
Sorry, I assumed Polymer 1.0.0-rc. I'll check again. – Günter Zöchbauer Oct 05 '15 at 16:52
For Polymer you need to add a dash in the event name `on-click` instead of `onclick`. – Günter Zöchbauer Oct 05 '15 at 16:54
Sorry that's a typo on my part when I was writing the post. I have the dash in my code. – maus Oct 05 '15 at 17:00
You either need a `@HtmlImport('my_form.html)` in your Dart file or a script tag in your elements HTML. – Günter Zöchbauer Oct 05 '15 at 17:05
Yes I have that. For properties that are String I can do `` and it works. But I can't figure out how to get it to work for a Function. I tried retrieving the element by ID in my main, after `initPolymer()`, like `MyForm form = (querySelector("#form1") as MyForm);`, but I got a CastError. – maus Oct 05 '15 at 18:20
The cast error indicates that your element is not upgraded. Some import is wrong or missing or some name inconsistent. Can you make the entire project available on GitHub? Your cast error might also be caused by a mistake in Polymer initialization. See http://stackoverflow.com/a/20982658/217408 – Günter Zöchbauer Oct 05 '15 at 18:22
Ah, excellent, thanks. I added the onReady and I was able to initialize my function there. I guess I don't have polymer 0.17.0. – maus Oct 05 '15 at 19:35
No, you have 0.16.x `@CustomTag` indicates it but I didn't pay enough attention at first. Glad to hear you figured it out. – Günter Zöchbauer Oct 06 '15 at 14:48

Assigning a function to published attribute

2 Answers2