So fokussieren Sie bestimmte Eingabeelemente in Ember 2

Question

Ich lerne Ember 2 und versuche, einen einfachen Inline-Editor zu schreiben. Mein Problem ist die automatische Fokussierung des Eingabeelements. Die Vorlage der Komponente ist wie folgt:

{{#if isEditing}} 
    {{input type="text" placeholder="Line item" autofocus="autofocus" value=value class="form-control" focus-out="save"}} 
{{/if}} 
{{#unless isEditing}} 
    <a href="#" {{action "toggleEditor"}}>{{value}}</a> 
{{/unless}} 

Mit dem Steuergerät versehen ist:

import Ember from 'ember'; 

export default Ember.Component.extend({ 
    actions: { 
     toggleEditor: function() { 
      this.set('isEditing', !this.get('isEditing')); 
     }, 
     save: function() { 
      var object = this.get('object'); 
      var property = this.get('property'); 
      object.set(property, this.get('value')); 
      var promise = object.save(); 
      promise.finally(() => { 
       this.send('toggleEditor'); 
      }); 
     } 
    } 
}); 

autofocus="autofocus" Werke zu verwenden, wenn die isEditing Parameter auf true setzen. Wenn das Ankerelement jedoch sichtbar ist und der Benutzer auf den Link klickt, wird der Fokus nicht auf das neu sichtbare Eingabeelement übertragen. Meine Frage lautet daher: Wie kann das Eingabeelement am besten fokussiert werden? Inside toggleEditor, wie greife ich auf das Eingabeelement per ID zu und wie kann ich es mit Ember fokussieren?

Answer 1

Es gibt eine bessere Möglichkeit, Eigenschaften umzuschalten.

this.toggleProperty('propertyName'); 

Verwenden Sie auch if/else.

Die Art, wie ich es funktionierte, war eine Aktion wie diese zu schreiben.

toggleIsEditing: function() { 
     this.toggleProperty('isEditing'); 

     if(this.get('isEditing')) { 
      Ember.run.scheduleOnce('afterRender', this, function() { 
       $('.my-input').focus(); 
      }); 
     } 
}, 

Weird Zeug tho.