Ember.js - 点击一个按钮来触发另一个按钮的点击事件

Question

我可以使用JQuery来完成任务，点击按钮2以触发按钮1的点击事件。

HTML：“

”

<div id="container">
<input id="upload_input" type="file" name="files[]" style="display:none" />
<button id="button-2">Upload File</button>
</div>

JS:

$('#upload_input').trigger('click');

我是新手，正在学习Ember.js，我希望在Ember.View的上下文中实现相同的功能。非常感谢您的帮助。

- Dotcomputercraft

---

按钮1或2实际上是做什么的？它们是否在调用控制器上的操作？ - Kingpin2k

嗨，Kingpin2k，我更新了示例以反映我想要在Ember.js中使用的用例。我是Ember.js的新手，所以我很难让这种情况正常工作。任何帮助将不胜感激。 - Dotcomputercraft

嘿，Kingpin2k，我很想听听你的想法和/或你可以帮忙制作的样本。非常感谢你提前。 - Dotcomputercraft

Answer 1

只需在输入框上使用“change”事件即可。然后您可以提交表单，或使用Ajax异步提交。这里是一个简单的示例：

视图

App.UploadButtonView = Ember.View.extend({
  tagName: 'input',
  attributeBindings: ['type'],
  type: 'file',

  change: function(e){
    var self = this;
    var formData = new FormData();
    formData.append('file', this.$().get(0).files[0]);
    $.ajax({
      url: '/file_upload/', 
      type: 'POST',
      //Ajax events
      success: function(data){ },
      error: function(){ },
      // Form data
      data: formData,
      //Options to tell jQuery not to process data or worry about content-type.
      cache: false,
      contentType: false,
      processData: false
    });
  }
});

Template

{{view 'uploadButton'}}

示例：http://emberjs.jsbin.com/jameg/1/edit

- Kingpin2k

---

嗨，Kingpin2k，感谢您提供的优秀示例。我想要一个样本，其中上传按钮的id = button-2点击事件会触发App.UploadButtonView更改处理程序。我想要这个功能的原因是因为我想自定义我的按钮，因为input type = file按钮相当丑陋。这可能吗？请告诉我。很快与您联系。 - Dotcomputercraft

只需将按钮包装在 div 中并设置样式，可参考 http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/。 - Kingpin2k

Kingpin2，非常感谢你的资源分享。它确实对我有所帮助。最好的祝愿。今天我想给你点赞，但我没有足够的声望积分。一旦我获得了足够的积分，我会回来给你点赞的。 - Dotcomputercraft