エンバー構文は

Question

私のHTMLテンプレートを働いていないIDで要素を取得することが基本である：私は私のコントローラでこれを持って

<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]; 

それは動作します、私はファイルのコンソールログを取得します。私が検索したファイルのエンバーの構文を使用している場合

しかし、私が使用している場合

TypeError: Cannot read property '0' of undefined 

：

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

を私はJavaScriptコンソールのエラーを取得する

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

私はこれを取得しますエラー：

このstackoverflowの答えによると

：

Getting element by ID in Ember

Ember.$()またはthis.$()は動作するはずですが、それは何らかの理由ではありません。

Answer 1

this.$は、コンポーネントでのみ使用できます。コンポーネントを作成すると、すべてが動作し始めます。アップロード-photo.jsにおいて

ember g component upload-photo 

、

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 }} 

で