Ember.js: acción de entrada en = "cambiar" no dispara

extraño:

trabajar alrededor: http://emberjs.jsbin.com/yedigeyeda/1/edit?html , js, consola, salida

Esto es similar a # 10305

esto es realmente molesto en las pruebas de aceptación, donde el fillIn helper no activará ningún evento "keyup", así que tengo que hacer:

fillIn('#my-input', 'some-val');
find('#my-input').trigger('keyup');

si quiero que los eventos se activen correctamente (ya que no puedo usar el evento de cambio, que probablemente sería activado por fillIn ).

@Fryie : eso no está relacionado con el problema que se informa aquí. Sin embargo, parece similar a https://github.com/emberjs/ember.js/pull/11016 .

Disculpas, solo quería señalar que 'keyup' no es una solución viable, por lo que en cierto sentido está relacionado. :)

@stefanpenner : @JKGisMe y yo descubrimos recientemente que el uso del ayudante {{input}} no activa acciones para eventos específicos. Aquí hay un ejemplo más detallado: http://ember-twiddle.com/0830f4ed9f15df59801e

(twiddle por @JKGisMe)

En realidad, muchos eventos no funcionan en el asistente de entrada en este momento, incluido todo lo relacionado con el mouse.

Sí, estoy rastreando esto. Intentaré completar lo que está sucediendo cuando no sea móvil.

Este es un problema serio. La configuración de dos o más acciones no puede ser no para el asistente de entrada. No puedo creer que Ember 2.0.0 todavía no tenga atributos como on-input = "" y on-change = "".
Espero que esto se solucione lo antes posible ...

No he probado _todas_ las acciones, pero acabo de utilizar esto con éxito:

{{input 
    value=value 
    autoresize=true 
    focus-in="inputFocusIn" 
    focus-out="inputFocusOut" 
    enter="removeFocus" 
}}

También puede usar la versión html antigua y las acciones de hbs para lograrlo.

<input 
    value={{someValue}} 
    onblur={{action checkForValid value="target.value"}}
    oninput={{action validate value="target.value"}}
/>

Ahora mismo admite estos:

insert-newline
insert-newline
escape-press  
focus-in      
focus-out     
key-press     
key-up        
key-down

http://emberjs.com/api/classes/Ember.TextSupport.html

Sí, pensé que este problema estaba informando una regresión con {{input action="foo" on="focus-in"}} (que tiene un alias de {{input focus-in="foo"}} ), pero estaba equivocado (eso funciona correctamente con cualquiera de los eventos enumerados anteriormente).

Se trata específicamente de usar on="change" , pero no estoy seguro de que sea algo que pretendamos admitir en este momento.

ok, entonces sí, tengo que agregar (mut model.value) a la acción de cambio para la versión de entrada html.

Lo que me lleva a preguntarme ... ¿cuál es el punto de tener un {{input si realmente no puedes usarlo? Parece que <input tiene fallas porque no puede hacer un enlace bidireccional fácilmente con hbs, pero al mismo tiempo {{input es algo inutilizable debido a sus restricciones de manejo de eventos. ¿No sería mejor no tener los {{input en absoluto para no confundir las cosas?

@JKGisMe - ¿Eh? ¿Cómo es {{input}} defectuoso? Funciona y es utilizado por una gran mayoría de aplicaciones de Ember sin incidentes ...

Entonces, en el twiddle vinculado arriba ... ¿Cómo harías todos los que están con {{input ?

En mi proyecto de trabajo, sin darme cuenta terminé usando la forma html para todos los cuadros de entrada antes de que se mencionara esto, pero ahora me pregunto si fue porque tengo un montón de acciones adjuntas a eventos que simplemente funcionaron de esta manera ... : P lástima que el desarrollador no se acuerde realmente.

@rwjblue Mi expectativa al usar el ayudante {{input}} era que era un azúcar sintáctico para crear una entrada HTML, mientras hacía enlaces bidireccionales para eventos de valor y enlace. {{input}} no es un enlace uno a uno para eventos porque no puede usar click o change para enlazar directamente a acciones. Debe utilizar uno de los eventos documentados.

Leer la guía sobre esto es sumamente engañoso porque no se menciona lo que no se puede usar como entrada.

http://guides.emberjs.com/v2.0.0/templates/input-helpers/

Especialmente, la sección de acciones le brinda un enlace a todos los eventos y le dice que simplemente los elimine. No es hasta que profundice y finalmente llegue a esta página:

http://emberjs.com/api/classes/Ember.Templates.helpers.html#method_input

Comenzando con esta declaración: "El asistente permite que algunos eventos de usuario envíen acciones".

Que te das cuenta de que no te estás volviendo loco y que click no va a funcionar.

No digo que eso esté mal; simplemente inesperado. Esto hizo que me lanzara a Slack y preguntara por qué. Fui recibido con gente tan perpleja como yo.

Me pregunto si ya hay una actualización sobre esto.

Soy nuevo en Ember y pasé la última hora rastreando este. No estoy seguro de si esto se debe a que soy un converso reciente de Angular y estoy acostumbrado a tener ng-change disponibles para mí.

En este momento todavía no estoy seguro de qué son las acciones o tengo una idea de lo que significan para mí, así que ni siquiera sabía qué buscar.

Independientemente, adoro este marco. Viniendo de Angular, todo aquí se siente bien pensado y mucho más consistente.

Editar: No se requieren acciones de esta publicación. Solo estaba dando comentarios.

@rwjblue @morganick También me mordió esta _miss-comprensión_. ¿Es la siguiente una guía correcta, aunque simplificada, sobre cuándo usar qué formulario para una entrada en un componente?

| Caso de uso | {{input}} frente a <input> |
| --- | --- |
| Observar valores en las entradas | {{input}} o <input> |
| Casillas de verificación con acciones | <input {{action="actionName" on="change"}} (para mantener el evento de clic actualizando la propiedad _checked_ de la casilla de verificación; tenga en cuenta que el observador en _checked_ no se activa y que no se puede acceder a la propiedad _checked_ de la casilla de verificación (*); tenga en cuenta también que la vinculación click de esta manera rompe el comportamiento típico de alternancia de casillas de verificación (!)); |
| Otros tipos de entrada | {{input}} si el evento es compatible con Ember.TextSupport de lo contrario <input> |

También creo que deberíamos cambiar la sección Acciones y casillas de verificación aquí .

* ... IMO La única forma de registrar un controlador de acciones y acceder al valor _checked_ de la casilla de verificación de manera confiable es usar el formulario onClick={{action "actionName"}} y marcar ev.target.checked en el controlador de acciones. También noté que onClick={{action "actionName"}} y {{action "actionName" on='click'}} comportan

Tenía problemas con esto y necesitaba cambiar un botón de guardar si cambiaban los valores de las entradas. Descubrí que si establece sus entradas dentro de un formulario y establece la acción "cambiar" en el formulario mismo, ejecutará la acción cada vez que se cambie una de las entradas dentro del formulario.

Twiddle aquí: https://ember-twiddle.com/?openFiles=templates.application.hbs%2C

Vea los nombres de los eventos aquí: http://emberjs.com/api/classes/Ember.View.html#toc_event -names

Si este no es el problema que tiene, por favor ignore esto 😄.

@ jfuqua390 Tu enlace twiddle
"
Twiddle aquí: https://ember-twiddle.com/?openFiles=templates.application.hbs%2C
"
no funciona, ¿puedes actualizar?

Por cierto, solo estoy dando mi solución a quien venga aquí.

    <input
      multiple="true"
      onchange={{action "upload"}}
      accept="image/png,image/jpeg,application/pdf"
      type="file"
    />

    actions: {
      upload: function(event) {
        console.log('upload');
      }
    }

@ldong Probé su

Uncaught ReferenceError: Invalid left-hand side in assignment

¿No estás seguro de si me falta algo?

Para cualquiera que todavía esté luchando con esto, esto parece funcionar bien:

{{input value=value input=(action "valChange")}}

Copiado de Stackoverflow

@EricSchank @Fryie @JKGisMe @MarkMT @SillyButt @abepetrillo @davidsteinberger @greyhwndz @jcfinnerup @ jfuqua390 @ldong @locks es esto todavía un problema, tal vez deberíamos cerrar o crear una nueva reproducción de esto, ¿qué piensas?

Cerrando por ahora, hay muchas formas de crear un evento de cambio funcional

@jcfinnerup ¿ alguna idea sobre cómo probar esto? ¿Cómo crearía el evento de entrada (con un ayudante como triggerEvent)?