Ember -보기 클릭 이벤트를 사용하여 파일 입력 요소 클릭 발생

Question

보기의 클릭 이벤트를 처리하고 파일 입력 요소에 대한 클릭을 트리거하고 싶습니다.

나는 또한 '추한'입력 요소 상자를 표시하지 않으려는, 그래서 0

input[type='file'] { 
    opacity: 0; 
    top: -100px; 
    position: absolute; 
} 

내가 함께 HTML의 모형을했다 불투명도를 뷰포트를 밀어하고 설정하는 CSS를 사용했다 jQuery는 원하는대로 작동합니다. 링크 참조 : 나는 또한 엠버에서 동일한을 구현하기 위해 노력 JSFIDDLE

을, 그리고 그것을 참고로

Uncaught RangeError: Maximum call stack size exceeded

의 오류를 던지고, 여기에 엠버입니다 - JSBIN

// View 
App.DropView = Ember.View.extend({ 
    templateName: 'dropView', 

    click: function(event) { 

    $("input[type='file']").click(); 
    event.preventDefault(); 

    } 
}); 

템플릿 :

<!-- Template --> 
<script type='text/x-handlebars' data-template-name='dropView'> 
    <a href="javascript:void(0)">Click Me</a> 
    <input type='file' id='files'> 
</script> 

Answer 1

당신은 입력의 이벤트 전파를 중지하거나 다른 입력에 클릭을 유발하는 것은보기에 클릭 트리거 계속됩니다 : 당신은 전체보기로 클릭 이벤트를 바인딩하고

http://jsbin.com/giqunoya/4/

Answer 2

을 . 당신이 <a> 태그를 클릭하면 그래서, 이것은 무슨 일이 일어나고 있습니다 :

• 이벤트는 버블 링까지보기
• 파일 입력이
• 클릭
• 이라고보기에 클릭에 이벤트는 버블 링 뷰까지
• 반복 Uncaught RangeError: Maximum call stack size exceeded

때까지 <a> 태그의 클릭 이벤트 만 바인딩해야합니다.

App.DropView = Ember.View.extend({ 
    templateName: 'dropView', 

    didInsertElement:function(){ 
    this.$('a').click(function(){ 
     Ember.$("input[type='file'").click(); 
    });    
    }, 

    willDestroyElement:function(){ 
    this.$('a').off(); 
    } 
});