Ember 通过 ID 获取元素的语法不起作用

Question

我的 HTML 模板是一个基本的：

<h1>Upload Photo</h1>

<form {{action "upload" on="submit"}}>
  {{input type="file" id="image"}}
  <button type="submit">Upload</button>
</form>

我的控制器里有这个：

import Ember from 'ember';

export default Ember.Controller.extend({
  firebaseApp: Ember.inject.service(),

  actions: {
    upload() {
      console.log('Uploading photo from controller');
      var storageRef = this.get('firebaseApp').storage().ref();

      // var selectedFile = Ember.$('#image').files[0];
      var selectedFile = document.getElementById('image').files[0];

      console.log('selectedFile = ', selectedFile);

      // var photoRef = storageRef.child('ember-mascot.png');
    }
  }
});

如果我使用正常的javascript方式：

var selectedFile = document.getElementById('image').files[0];

成功了，我得到了文件的控制台日志。

但是，如果我使用 Ember 的检索文件语法：

var selectedFile = Ember.$('#image').files[0];

我收到 javascript 控制台错误：

TypeError: Cannot read property '0' of undefined

如果我使用：

var selectedFile = this.$('#image').files[0];

我收到这个错误：

TypeError: this.$ is not a function

根据这个 Whosebug 答案：

Getting element by ID in Ember

Ember.$() 或 this.$() 应该有效，但由于某些原因无效。

Answer 1

this.$ 仅在组件中可用。如果您创建组件，一切都会开始工作。

ember g component upload-photo

上传中-photo.js,

import Ember from 'ember';

export default Ember.Component.extend({
  firebaseApp: Ember.inject.service(),

  actions: {
    upload() {
      console.log('Uploading photo from controller');
      var storageRef = this.get('firebaseApp').storage().ref();

      // var selectedFile = Ember.$('#image').files[0];
      var selectedFile = document.getElementById('image').files[0];

      console.log('selectedFile = ', selectedFile);

      // var photoRef = storageRef.child('ember-mascot.png');
    }
  }
});

并在上传中-photo.hbs,

<h1>Upload Photo</h1>

<form {{action "upload" on="submit"}}>
  {{input type="file" id="image"}}
  <button type="submit">Upload</button>
</form>

并将其包含在如下模板中，

{{upload-photo }}

Ember 通过 ID 获取元素的语法不起作用

Ember syntax to get element by ID not working

getelementbyid

ember.js