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＆lt; 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

为已发布的属性

2 个答案: