使用余燼添加Dropbox選擇器

Question

我正在嘗試將Dropbox選擇器集成到余燼應用程序中 。 這是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>

這就是我嘗試在ember中實現它的方式。

包含的<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"}}/>

這是行不通的。 我的問題是如何將自定義事件偵聽器添加到ember中的html 元素 ？

Answer 1

直接通過javascript使用Dropbox選擇器怎么樣（ 選擇器文檔頁面下半部 ）

JavaScript的：

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>

功能性JSBin排序（無有效的data-app-key ）