Присвоение функции опубликованному атрибуту

Question

У меня есть пользовательский полимерный элемент, который является формой и выглядит примерно так.

Скрипт дартса:

@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

Когда нажата кнопка отправки, будет вызвана функция отправки, но, как вы можете видеть, ее нужно сначала установить на что-то. Я использую этот элемент несколько раз на одной странице, и для каждой формы мне нужно сделать что-то другое.

В моем основном у меня есть это:

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

И в HTML:

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

Но это не работает. Функции submitForm вообще не запускаются. Какие-либо предложения?

Answer 1

Чтобы программно инициализировать submitFunction (для Polymer < 0.17.0), добавьте ниже.

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

Answer 2

Для Polymer вам нужно добавить тире в название события on-click вместо onclick,

В зависимости от версии Polymer, которую вы используете, вам нужно аннотировать функции

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

Polymer 1.0 довольно ограничен, что возможно / разрешено в выражениях связывания. Пробелы тоже могут вызвать проблемы

"{{ submitForm1 }}"

пытаться

"{{submitForm1}}" instead