Cómo usar el enfoque automático con las plantillas ember.js?

Tengo un campo de texto simple ember.js y estoy tratando de añadir autofocoCómo usar el enfoque automático con las plantillas ember.js?

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

PersonApp.SearchField = Ember.TextField.extend({ 

});

puedo añadir esto en el código JavaScript o está en tan simple como un atributo en la propia plantilla?

Fuente

2012-09-24 Toran Billups

Este es un duplicado de http://stackoverflow.com/q/9468061/90741 –

Actualización:

Las versiones más recientes de Ember ahora tienen soporte para esta incorporada, por lo que ya no es necesario volver a abrir TextField para agregar un atributo Enlace. A partir de enero del 2014 (cometer fdfe8495), puede simplemente usar el atributo autofocus HTML5 en su plantilla:

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

Aquí es una simple jsfiddle demonstration.

Solución anterior:

También puede abrir de nuevo campo de texto para que pueda enlazar el atributo de enfoque automático:

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

Y luego en su plantilla:

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

Fuente

2013-11-03 23:42:15 psanford

Esta respuesta no funcionó para mí. Sin embargo, la respuesta a continuación de @rit parece funcionar en mi caso. – Paul

Una pequeña nota. El enfoque automático Html5 solo funciona si aterriza en esa página desde afuera. El enrutamiento a la página desde otra página de su aplicación de Internet emberjs no activará el atributo de enfoque automático html5 desafortunadamente. (Ember.js 2.0 y anteriores) – Zoltan

¿Autofocus significa que comenzamos a centrarnos en el cuadro de texto de inmediato? Quiere didInsertElement para eso.

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

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

Fuente

2012-09-24 01:29:44 Ryan

También existe la opción de utilizar el atributo autofocus HTML5 en el campo de texto.

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

Ver también documentation on Mozilla Developer Network para más información sobre el campo de enfoque automático:

Fuente

2012-09-24 07:26:00 rit

Buena respuesta, pero en general, w3schools no es una fuente realmente precisa. Ver http://w3fools.com/ –

bien para la autocompleta es lo suficientemente bueno :) – rit

Envolví este método en un pequeño paquete de 1 kb para resolver este incluso un poco más elegante, directamente en la plantilla, sin ningún tipo de codificación además:

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

El paquete está en https://github.com/AndreasPizsa/ember-autofocus (o en bower install ember-autofocus). ¡Disfrutar!

Fuente

2014-01-04 02:30:11 AndreasPizsa

Cómo usar el enfoque automático con las plantillas ember.js?

Respuesta

Cuestiones relacionadas