如何從流星中的Submit事件獲取輸入ID？

Question

在一個模板中，我有：

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

當用戶在moviesTemplate上單擊“刪除”時，我想從我的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'是事件，它不包含與source元素有關的任何信息。 我還應該怎么做才能做到這一點？ 我需要重新考慮自己的做法嗎？

Answer 1

對我來說，id似乎屬於表單，而不屬於Submit按鈕。 我將使用以下內容：

<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屬性。

Answer 2

不幸; 這不是那么簡單。

起點將類似於此答案，但是您可能需要處理在元素上按“ Enter”鍵之類的事情

Template.moviesTemplate.events = {
    'click input[type=submit]': function(e, tmpl){
       tmpl.find('input[type=submit]').data('clicked',false);
       $(e.currentTarget).data('clicked',true);
    },
    'submit': function (e, tmpl) {
        e.preventDefault();
        var theId = tmpl.find('input[type=submit]').filter(function(i,ele){
          return $(ele).data('clicked');
        }).get(0).attr('id');    
     }
}

Answer 3

使用tmpl.find並獲取id ：

Template.moviesTemplate.events = {
     'submit':function(e, tmpl){
         e.preventDefault();
      },
     'click input[type="submit"]':function(e, tmpl){
         console.log(e.currentTarget.id)
     }
 }

證明

Answer 4

您可以創建一個提交表單事件，然后有條件地檢查事件目標字段。 根據要插入的集合調用適當的Meteor方法。

Template.detailsViewTemplate.events({
    'submit form': function(ev){
        ev.preventDefault();

        var detail_input_field = template.$('#detail_entry');
        var message_input_field = template.$('#message_entry');

        if(detail_input_field != undefined){
            var detailFormData = {
            detail: $(ev.target).find('[name = detail]').val(),
            parentId: $(ev.target).find('[name = parentId]').val(),
            checkboxStatus: ''
            }

            Meteor.call('addDetail', detailFormData);
            $('.form-group').children().val('');

        } else if(message_input_field != undefined){
            var newMessageData = {
                listId: this.params_id,
                message: $(ev.target).find('[name = message]').val()
            }
            Meteor.call('addMessage', newMessageData);
            $('.form-group').children().val('');
        }
    }
}