從JQuery.click（）多次觸發Meteor類

Question

我有一個我多次使用的通用模板。

{{#each item}}
   {{> genericTemplate}}
{{/each}}

在這個模板的內部，我有一個按鈕，當它被點擊時觸發通用模板中的隱藏文件輸入。

 $(".upload").click();

不幸的是，每個模板都會觸發“.upload”類。 所以如果我有四個items ，它會給我4個文件輸入。 我不能給按鈕一個唯一的id=""因為那時我必須為每個id明確定義每個事件，否定了創建通用模板的全部原因。 實現這樣的目標的正確方法是什么？

編輯：

我的模板事件如下所示：

Template.generic.events({
   'click .fileUpload' : function () {
     $(".upload").click(); // sets off the 4 templates .upload class
   },
  'change .upload' : function (e) {
    console.log('upload')
   }
})

HTML：

<template name="generic">
   <!--Hidden Inputs that get fired on click events -->
   <div class="hiddenFile">
      <input type="file" class="upload"/>
   </div>

  <button class="btn btn-success fileUpload">UPLOAD FILE </button>
</template>

Answer 1

嘗試這個技巧：

Template.generic.events({
  'click .fileUpload' : function (event,template) {
    // fires only the template instance .upload
    template.$(".upload").click();
  },
  'change .upload' : function (e) {
    console.log('upload')
  }
});

Answer 2

您可以使用Template.instance僅在適當的實例中觸發事件：

'click .fileUpload' : function () {
  var template = Template.instance();
  template.$(".upload").click(); // should only set off this specific upload input.
}

也就是說，如果沒有在DOM中制作事件，你真的沒辦法達到同樣的效果嗎？ 這取決於你，但是你不能直接運行代替console.log('upload')的代碼嗎？

Answer 3

也許像這樣？

Template.generic.events({
    'click .fileUpload' : function (event, target) {
       e.currentTarget.parent().find(".upload").click(); // sets off the 4 templates .upload class
    },
    'change .upload' : function (e) {
        console.log('upload')
    }
})