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')
    }
})

从JQuery.click（）多次触发Meteor类

3 个答案: