如何在嵌套模板中添加事件监听器？

Question

在下面的代码中：

<body unresolved fullbleed layout vertical>
    <template is="auto-binding" id="app">
        <core-ajax auto url="http://testesapi.azurewebsites.net/api/padaria" params='{"alt":"json", "q":"chrome"}' handleAs="json" response="{{produtos}}" id="ajax"></core-ajax>
        <template id="template2" repeat="{{prod in produtos}}">
            <form class="myForm" is="ajax-form" action="http://testesapi.azurewebsites.net/api/padaria" method="put">
                <input type="hidden" name="id" is="core-input" value="{{prod.id}}">
                <paper-input name="nome" label="Nome" value="{{prod.nome}}" floatinglabel></paper-input>
                <paper-input name="Preco" label="Preço" value="{{prod.Preco}}" floatinglabel>></paper-input>
                <button type="submit">SALVAR</button>
            </form>
        </template>
    </template>
</body>

如何将事件侦听器添加到“.myForm”？我需要在 ajax-form 为 'submitted'.

之后调用 core-ajax go() 方法

我的问题是 querySelectorAll('.myForm') 结果为空，所以它似乎还不在 DOM 中。

我试图将 querySelector 放入其中（但没有成功）：

app.addEventListener('template-bound', function() {});

这是一个 Polymer 应用程序。

更新 1

我得到了嵌套模板，给它一个 id "template2" 和：

var app = document.querySelector('#app');
app.addEventListener('template-bound', function() 
    var template2 = app.$.template2;
    <== question now is: how to "for each" the forms inside template2 to add an Event Listener?
});

Answer 1

使用 querySelectorAll('.myForm')[0] 指定该类型的第一个元素。

目前，如果您只有 1 个表单，则可以使用 getElementById() 来提高性能（微小的收益）。

编辑：

这是使用 querySelector 和 querySelectorAll 的粗略示例。

var form = document.querySelectorAll('.myForm')[0].style.backgroundColor = 'red';

var form = document.querySelector('.myForm2').style.backgroundColor = 'green';

对于创建的元素 querySelectorAll 是无用的，因为它只有 returns 静态 list.You 可以创建元素并通过使用 ID 的示例获取元素它 returns 实际的节点列表。

var section = document.getElementById('section');
section.children[3];

https://jsfiddle.net/kroq55td/1/

Answer 2

您是否尝试过只添加声明性事件处理程序（on-event 属性）？ ajax-form 有 submitting 和 submitted 事件，所以大概你可以做这样的事情：

<form class="myForm" is="ajax-form" on-submitting="myHandler" action="http://testesapi.azurewebsites.net/api/padaria" method="put">

如何在嵌套模板中添加事件监听器？

How addEventListener in nested template?

polymer