Come utilizzare la messa a fuoco automatica con i modelli ember.js?

Ho un semplice campo di testo ember.js e sto cercando di aggiungere autofocusCome utilizzare la messa a fuoco automatica con i modelli ember.js?

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

PersonApp.SearchField = Ember.TextField.extend({ 

});

posso aggiungere questo nei javascript o è a semplice come un attributo nel modello stesso?

fonte

2012-09-24 Toran Billups

Questo è un duplicato di http://stackoverflow.com/q/9468061/90741 –

Aggiornamento:

più recenti versioni di Ember hanno ora il supporto per questo integrato, in modo non è più necessario riaprire TextField per aggiungere un attributoBinding. A partire da gennaio 2014 (commit fdfe8495), si può semplicemente utilizzare l'attributo autofocus HTML5 nel modello:

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

Ecco un simple jsfiddle demonstration.

precedente soluzione:

È inoltre possibile riaprire TextField per consentire di associare l'attributo autofocus:

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

E poi nel modello:

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

fonte

2013-11-03 23:42:15 psanford

Questa risposta non ha funzionato per me. Tuttavia la risposta di seguito di @rit sembra funzionare nel mio caso. – Paul

Una piccola nota. L'autofocus Html5 funziona solo se si atterra in quella pagina dall'esterno. L'instradamento verso la pagina da un'altra pagina della tua webapp emberjs non attiva l'attributo html5 dell'autofocus sfortunatamente. (Ember.js 2.0 e versioni precedenti.) – Zoltan

Autofocus significa che iniziamo a concentrarci sulla casella di testo immediatamente? Vuoi didInsertElement per quello.

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

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

fonte

2012-09-24 01:29:44 Ryan

C'è anche la possibilità di utilizzare l'attributo autofocus HTML5 sul TextField.

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

Vedi anche documentation on Mozilla Developer Network per ulteriori informazioni sul campo messa a fuoco automatica:

fonte

2012-09-24 07:26:00 rit

Risposta piacevole, ma in generale, w3schools non è una fonte molto accurata. Vedi http://w3fools.com/ –

beh per il completamento automatico è abbastanza buono :) – rit

Ho avvolto questo metodo in un piccolo pacchetto da 1kb per risolvere questo anche un po 'più elegante, direttamente nel modello, senza alcuna ulteriore codifica:

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

Il pacchetto è a https://github.com/AndreasPizsa/ember-autofocus (o bower install ember-autofocus). Godere!

fonte

2014-01-04 02:30:11 AndreasPizsa

Come utilizzare la messa a fuoco automatica con i modelli ember.js?

risposta

Problemi correlati