使用ember添加Dropbox选择器

Adding Dropbox chooser using ember

本文关键字：选择器 Dropbox 添加 ember 使用      更新时间：2023-09-26

我正在尝试将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>

这是我在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"}}/>

这不起作用。我的问题是我们如何添加自定义事件监听器 html 元素在ember?

直接通过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>

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

相关文章：