ember를 사용하여 Dropbox 선택기를 추가하십시오.

Question

Dropbox 선택기을 내 ember 응용 프로그램에 통합하려고합니다. 이것은 dropbox에 의해 생성 된 스 니펫입니다.

<script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropins.js" id="dropboxjs" data-app-key="XXXXXXXXXXX"></script> 

<input type="dropbox-chooser" name="selected-file" id="db-chooser"/> 
<script type="text/javascript"> 
    document.getElementById("db-chooser").addEventListener("DbxChooserSuccess", 
     function(e) { 
      alert("Here's the chosen file: " + e.files[0].link) 
     }, false); 
</script> 

이것은 엠버에서 구현 한 방법입니다.

응용 프로그램 레이아웃 파일에 <script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropins.js" id="dropboxjs" data-app-key="XXXXXXXXXXX"></script>이 포함됩니다.

window.App = Ember.Application.create({ 
    rootElement: '#ember-app', 

    customEvents: { 
    DbxChooserSuccess: "DbxChooserSuccess" 
    }, 

)}; 

App.TestView = Em.View.extend({ 
    templateName: "test_view", 

    tagName: "li", 

    testAction: function(e) { 
    alert("DbxChooserSuccess event triggered"); 

    } 

}); 

//test_view.js.hjs 
<input type="dropbox-chooser" name="selected-file" id="db-chooser" {{action "testAction" on="DbxChooserSuccess" target="view"}}/> 

이것은 작동하지 않습니다. 내 질문에 우리는 어떻게 사용자 정의 이벤트 리스너를 추가 할 수 있습니다 html 요소 ember에?

Answer 1

무엇 직접 자바 스크립트를 통해

자바 스크립트 (중간 the chooser documentation의 페이지 아래) 드롭 박스 선택기를 사용하는 방법에 대한 :

이

App.IndexController = Ember.ArrayController.extend({ 
    dropboxChooser: function() { 

    Dropbox.choose({ 
     linkType: "direct", 
     multiselect: false, 
     success: function(files) { 
       // Required. Called when a user selects an item in the Chooser 
       alert("Here's the file link:" + files[0].link); 
     }, 
     cancel: function() {} 
    }); 
    } 
}); 

템플릿 :

<button {{action dropboxChooser}}>Choose Dropbox File</button> 

Sort of functional JSBin (no valid data-app-key)