Wie Autofokus mit ember.js Vorlagen verwenden?

Ich habe ein einfaches Ember.js Textfeld und ich versuche, Autofokus hinzufügenWie Autofokus mit ember.js Vorlagen verwenden?

{{view PersonApp.SearchField placeholder="search..." valueBinding="searchText"}} 

PersonApp.SearchField = Ember.TextField.extend({ 

});

Kann ich dies in dem javascript oder ist so einfach wie ein Attribut in der Vorlage selbst?

Quelle

2012-09-24 Toran Billups

Dies ist ein Duplikat von http://stackoverflow.com/q/9468061/90741 –

Update:

Neuere Versionen von Ember haben jetzt die Unterstützung für diese eingebaut, so dass Sie nicht mehr wieder öffnen müssen TextField zum Hinzufügen einer AttributBinding. Ab Januar 2014 (verpflichten fdfe8495), können Sie einfach das Attribut HTML5 Autofokus verwenden in Ihrer Vorlage:

{{input value=search type="text" placeholder="Search" autofocus="autofocus"}}

hier ein simple jsfiddle demonstration ist.

zurück Lösung:

können Sie auch TextField- wieder öffnen Sie das Autofokus-Attribut binden lassen:

Ember.TextField.reopen({ 
    attributeBindings: ['autofocus'] 
});

Und dann in der Vorlage:

{{input value=search type="text" placeholder="Search" autofocus="autofocus"}}

Quelle

2013-11-03 23:42:15 psanford

Diese Antwort hat nicht für mich funktioniert. Allerdings scheint die Antwort von @rit in meinem Fall zu funktionieren. – Paul

Eine kleine Notiz. Der HTML5-Autofokus funktioniert nur, wenn Sie von außen auf dieser Seite landen. Wenn Sie von einer anderen Seite Ihrer Emberjs-Webanwendung zur Seite navigieren, wird das Autofokus-HTML5-Attribut leider nicht aktiviert. (Ember.js 2.0 und früher.) – Zoltan

Autofokus bedeutet, dass wir uns sofort auf das Textfeld konzentrieren? Sie wollen didInsertElement dafür.

didInsertElement: function() { 
    this.$().focus();    
}

http://jsfiddle.net/qKXJt/139/

Quelle

2012-09-24 01:29:44 Ryan

Es besteht auch die Möglichkeit, das HTML5-Autofokus-Attribut für das TextField- zu verwenden.

PersonApp.SearchField = Ember.TextField.extend({ 
    attributeBindings: ['autofocus'], 
    autofocus: 'autofocus' 
});

Siehe auch documentation on Mozilla Developer Network für weitere Informationen über das Autofokus-Feld:

Quelle

2012-09-24 07:26:00 rit

Schöne Antwort, aber im Allgemeinen ist w3schools keine wirklich genaue Quelle. Siehe http://w3fools.com/ –

gut für die Autocomplete ist es gut genug :) – rit

Ich habe diese Methode in ein kleines 1kb-Paket verpackt

<body> 
    <!-- all the libraries --> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.2.0/ember.min.js"></script> 
    <script src="http://rawgithub.com/AndreasPizsa/ember-autofocus/master/dist/ember-autofocus.min.js"></script> 
    <!-- your template --> 
    <script type="text/x-handlebars"> 
    Hello, world! {{ input }} 
    : 
    : more elements here 
    : 
    {{ autofocus }} 
    </script> 
    <!-- your app --> 
    <script> 
    Ember.Application.create(); 
    </script> 
</body>

Das Paket ist bei https://github.com/AndreasPizsa/ember-autofocus (oder auf bower install ember-autofocus): In diesem sogar ein wenig mehr elegant, direkt in der Vorlage, ohne weitere Codierung zu lösen. Genießen!

Quelle

2014-01-04 02:30:11 AndreasPizsa

Wie Autofokus mit ember.js Vorlagen verwenden?

Antwort

Verwandte Themen