javascript - 如何从 meteor 的提交事件中获取输入ID？

Question

在一个模板中，我有:

    <template name="moviesTemplate">
     <form>
       <ul>
         {{#each movies}}
           <li>
             {{title}} <input id="{{title}}" type="submit" value="Delete" />  
           </li> 
         {{/each}}
      </ul>
    </form>
    </template> 

当用户单击 movieTemplate 上的“删除”时，我想从我的 javascript 文件的事件中查找输入元素的 id 属性:

Template.moviesTemplate.events = {
    'submit': function (e, tmpl) {
        e.preventDefault();
        var theId = theButtonThatRaisedTheEvent.id.toString();  // <--- This is what I'm referring to

     }
 }

如何找到这个元素？我以为是“e”，但我似乎无法从中得到任何ID。也许我理解错了...

编辑1:

好吧，看来'e'是事件，它不包含与源元素相关的任何信息。我还能如何完成这个任务？我需要重新思考我该怎么做吗？

Answer 1

对我来说，听起来 id 属于表单，而不属于提交按钮。我会使用以下内容:

<template name="main">
    <form data-id="anId">
        <input type="submit" value="Delete!">
    </form>
</template>

Template.main.events({
    'submit form': function(event, template){
        event.preventDefault() // Don't submit it!
        var id = event.currentTarget.getAttribute('data-id') // Get the id attribute.
        console.log(id)
    }
})

更新

将您现在拥有的模板替换为:

<template name="moviesTemplate">
    <ul>
        {{#each movies}}
            <li>
                <form data-id="{{title}}">
                    {{title}} <input type="submit" value="Delete" />  
                </form>
            </li> 
        {{/each}}
    </ul>
</template>

并使用本文之前编写的事件处理程序。

实际上，事件处理程序中的 this 将是电影的上下文，因此处理程序可以简单地是:

Template.main.events({
    'submit form': function(event, template){
        event.preventDefault() // Don't submit it!
        var id = this.title // Get the title through the context.
        console.log(id)
    }
})

因此无需在表单上使用 data-id 属性。