2014-10-03 3 views
1

У меня есть общий шаблон, который я использую несколько раз.Метеоритный класс несколько раз запускается из JQuery.click()

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

Внутри этого шаблона у меня есть кнопка, которая при нажатии на нее вызывает ввод скрытого файла в шаблон общего назначения.

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

К сожалению, для каждого шаблона класс «.upload» уволен. Поэтому, если бы у меня было четыре items, это дало бы мне 4 файла входа. Я не могу дать кнопкам уникальный id="", потому что тогда мне пришлось бы явно определять каждое событие для каждого идентификатора, отрицая всю причину создания общего шаблона в первую очередь. Каков правильный способ добиться чего-то подобного?

EDIT:

Мои шаблоны событий выглядеть следующим образом:

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> 

ответ

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') 
    } 
}); 
+0

См. Правки. Я понимаю определяющие события. Дайте мне знать, если я не буду разбираться в этом вопросе. – Nate

+0

Не могли бы вы также указать код HTML? – saimeunt

+0

Отредактировал свой ответ, я думаю, что это должно сделать трюк. – saimeunt

1

Вы можете использовать Template.instance стрелять го е событие только в соответствующем случае:

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

Тем не менее, не существует на самом деле не так, как вы можете достичь того же эффекта без изготовления события в DOM? Это зависит от вас, но не можете ли вы просто запустить код, который заменит console.log('upload') напрямую?

+0

Этот экземпляр экземпляра был тем, что мне не хватало. Это плохая практика? – Nate

1

Возможно, что-то вроде этого?

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') 
    } 
}) 
Смежные вопросы