meteor 템플릿 인수 값이 도우미와 이벤트가 다릅니다

Question

인자가있는 Blaze 템플릿을 포함시킨 다음 이벤트에 인수 값을 사용하고 싶습니다. 문제는 다른 인수로 두 번째 템플릿을 포함 할 때 이벤트에서 템플릿의 첫 번째 인스턴스에서 인수 값을 가져옵니다.

템플릿 :

<template name="UploadFormLayoutImage"> 
    <form class="uploadPanel"> 
     <input type="file" name="fileupload" id="input-field"> 
     <label for="input-field">Upload file</label> 
    </form> 
</template> 

은 다음과 같습니다 :

{> UploadFormLayoutImage layoutArea="area1"}} 
{> UploadFormLayoutImage layoutArea="area2"}} 

JS :

Template.UploadFormLayoutImage.onCreated(function(){ 
    this.currentArea = new ReactiveVar; 
    this.currentArea.set(this.data.layoutArea); 
}); 


Template.UploadFormLayoutImage.helpers({ 
    layoutArea: function() { 
     return Template.instance().currentArea.get(); //Returns the correct argument value for each instance of the template. 
    } 
}); 


Template.UploadFormLayoutImage.events({ 
    'change input[type="file"]': function(e, instance) { 
     e.preventDefault(); 
     console.log(instance.data.layoutArea); //Allways returns 'area1' 
    } 
}); 

나는 여기에 놓치고 무엇을? (이것은 내 첫 번째 Stackoverflow 질문입니다.) 부드럽게하십시오 :)

Answer 1

코드 예제를 읽기 쉽게하기 위해 문제를 일으킨 부분을 제거했습니다. 입력 필드에 레이블을 사용하고 있으므로 입력 필드에 ID가 있으며 템플릿을 반복 할 때 물론 확인되지 않습니다.

이제 layoutArea-helper를 id 값으로 사용하고 모든 것이 올바르게 작동합니다.

<template name="UploadFormLayoutImage"> 
    <form class="uploadPanel"> 
     <input type="file" name="fileupload" id="{{layoutArea}}"> 
     <label for="{{layoutArea}}">Upload file</label> 
    </form> 
</template> 

Answer 2

instance.data.layoutArea을 이벤트 방법에서 this.layoutArea으로 변경하면 어떻게됩니까?