Ember.js: action d'entrée on = "change" ne se déclenche pas

étrange:

contourner: http://emberjs.jsbin.com/yedigeyeda/1/edit?html , js, console, sortie

Ceci est similaire à # 10305

c'est vraiment ennuyeux dans les tests d'acceptation, où l'assistant fillIn ne déclenchera aucun événement "keyup", donc je dois faire:

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

si je veux que les événements se déclenchent correctement (puisque je ne peux pas utiliser l'événement de modification, qui serait probablement déclenché par fillIn ).

@Fryie - Cela n'a aucun rapport avec le problème signalé ici. Cela semble similaire à https://github.com/emberjs/ember.js/pull/11016 cependant.

Excusez-moi, je voulais seulement souligner que le «keyup» n'est pas une solution de contournement faisable, donc dans un sens, c'est lié. :)

@stefanpenner : @JKGisMe et moi avons récemment découvert que l'utilisation de l'aide {{input}} ne déclenche pas d'actions pour les événements spécifiés. Voici un exemple plus détaillé: http://ember-twiddle.com/0830f4ed9f15df59801e

(twiddle par @JKGisMe)

En fait, beaucoup d'événements ne fonctionnent pas sur l'assistant de saisie pour le moment, y compris tout ce qui est lié à la souris.

Oui, je suis en train de suivre ça. Essayera de remplir ce qui se passe quand il n'est pas mobile.

Ceci est un sérieux problème. La définition de deux actions et plus ne peut pas être une aide à la saisie. Je ne peux pas croire qu'Ember 2.0.0 n'a toujours pas de tels attributs comme on-input = "" et on-change = "".
J'espère que cela sera corrigé dès que possible ...

Je n'ai pas testé _toutes_ les actions mais j'ai juste utilisé ceci avec succès:

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

Vous pouvez également simplement utiliser la version html à l'ancienne et les actions hbs pour y parvenir.

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

À l'heure actuelle, il prend en charge ceux-ci:

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

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

Oui, je pensais que ce problème signalait une régression avec {{input action="foo" on="focus-in"}} (qui est alias {{input focus-in="foo"}} ), mais je me suis trompé (cela fonctionne correctement avec l'un des événements énumérés ci-dessus).

Il s'agit spécifiquement d'utiliser on="change" , mais je ne suis pas certain que ce soit quelque chose que nous avons l'intention de supporter pour le moment.

ok donc oui, je dois ajouter un (mut model.value) à l'action sur le changement pour la version d'entrée html.

Ce qui m'amène à me demander ... quel est l'intérêt d'avoir un {{input si vous ne pouvez pas vraiment l'utiliser? Il semble que <input est imparfait parce que vous ne pouvez pas facilement faire de liaison bidirectionnelle avec hbs, mais en même temps {{input est quelque peu inutilisable à cause de ses restrictions de gestion des événements. Ne ferait-on pas mieux de ne pas avoir du tout les {{input pour ne pas confondre les choses?

@JKGisMe - Hein? En quoi {{input}} défectueux? Il fonctionne et est utilisé par une grande majorité d'applications Ember sans incident ...

Donc, dans le twiddle lié ci-dessus ... Comment feriez-vous tout cela avec le {{input ?

Dans mon projet de travail, j'ai par inadvertance fini par utiliser la méthode html pour toutes les boîtes de saisie avant que cela ne soit évoqué, mais maintenant je me demande si c'était parce que j'ai une tonne d'actions attachées à des événements qui fonctionnaient de cette façon ... : P dommage que le développeur ne se souvienne pas vraiment.

@rwjblue Mon attente lors de l'utilisation de l'aide {{input}} était qu'il s'agissait d'un sucre syntaxique pour créer une entrée HTML, tout en effectuant une liaison bidirectionnelle pour les événements de valeur et de liaison. {{input}} n'est pas une liaison un-à-un pour les événements car vous ne pouvez pas utiliser click ou change pour vous lier directement aux actions. Vous devez utiliser l'un des événements documentés.

La lecture du guide à ce sujet est très trompeuse car il n'y a aucune mention de ce que vous ne pouvez pas utiliser pour une entrée.

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

Surtout, la section actions vous donne un lien vers tous les événements et vous dit de simplement les mettre en évidence. Ce n'est que lorsque vous creuserez et atteindrez finalement cette page:

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

En commençant par cette instruction: "L'assistant permet à certains événements utilisateur d'envoyer des actions."

Que vous vous rendez compte que vous ne devenez pas fou et que click ne fonctionnera pas.

Je ne dis pas que c'est faux; juste inattendu. Cela m'a amené à sauter dans Slack et à me demander pourquoi. J'ai été accueilli par des gens aussi perplexes que moi.

Je me demande s'il y a déjà une mise à jour à ce sujet

Je suis nouveau à Ember et j'ai passé la dernière heure à suivre celui-ci. Je ne sais pas si c'est parce que je suis un converti récent d'Angular et que j'ai l'habitude d'avoir ng-change à ma disposition.

En ce moment, je ne suis toujours pas sûr de ce que sont les actions ou j'ai une idée de ce qu'elles signifient pour moi, donc je ne savais même pas quoi chercher.

Quoi qu'il en soit, j'adore ce cadre. Venant d'Angular, tout ici semble bien pensé et beaucoup plus cohérent.

Modifier: Aucune action requise pour ce message. Je faisais juste des commentaires.

@rwjblue @morganick J'ai aussi été mordu par cette _miss-compréhension_. Est-ce que ce qui suit est une directive correcte, bien que simplifiée, sur le moment d'utiliser quelle forme pour une entrée dans un composant?

| Cas d'utilisation | {{input}} vs <input> |
| --- | --- |
| Observer les valeurs sur les entrées | {{input}} ou <input> |
| Cases à cocher avec actions | <input {{action="actionName" on="change"}} (pour garder l'événement de clic mettant à jour la propriété _checked_ de la case à cocher; Notez que l'observateur sur _checked_ ne se déclenche pas et que la propriété _checked_ de la case à cocher n'est pas accessible (*); Notez également que la liaison click de cette manière casse le comportement de basculement typique des cases à cocher (!)); |
| Autres types d'entrée | {{input}} si l'événement est pris en charge par Ember.TextSupport sinon <input> |

Je pense également que nous devrions changer la section Actions et cases à cocher ici .

* ... IMO La seule façon d'enregistrer un gestionnaire d'action et d' accéder de manière fiable à la valeur _checked_ de la case à cocher est d'utiliser le formulaire onClick={{action "actionName"}} et de vérifier ev.target.checked dans le gestionnaire d'action. J'ai aussi remarqué que onClick={{action "actionName"}} et {{action "actionName" on='click'}} se comportent différemment: le premier passe l'auditeur d'événement, tandis que le second ne le fait pas. Est-ce que c'est prévu?

J'avais des problèmes avec cela et j'avais besoin de changer un bouton d'enregistrement si les valeurs des entrées changeaient. J'ai trouvé que si vous définissez vos entrées dans un formulaire et définissez l'action «changement» sur le formulaire lui-même, il exécutera l'action chaque fois qu'une des entrées du formulaire est modifiée.

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

Voir les noms d'événements ici: http://emberjs.com/api/classes/Ember.View.html#toc_event -names

Si ce n'est pas le problème que vous rencontrez, ignorez-le simplement 😄.

@ jfuqua390 Votre lien
"
Twiddle ici: https://ember-twiddle.com/?openFiles=templates.application.hbs%2C
"
ne fonctionne pas, pouvez-vous mettre à jour?

BTW, juste donner ma solution à quiconque vient ici.

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

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

@ldong J'ai essayé votre travail (certes sur une ancienne version de braise) et j'ai reçu l'erreur suivante:

Uncaught ReferenceError: Invalid left-hand side in assignment

Vous ne savez pas si je manque quelque chose?

Pour tous ceux qui ont encore des difficultés avec cela, cela semble fonctionner très bien:

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

Copié depuis Stackoverflow

@EricSchank @Fryie @JKGisMe @MarkMT @SillyButt @abepetrillo @davidsteinberger @greyhwndz @jcfinnerup @ jfuqua390 @ldong @locks est-ce toujours un problème, peut-être devrions-nous fermer ou créer une nouvelle reproduction de cela, qu'en pensez-vous?

Clôture pour l'instant, il existe de nombreuses façons de créer un événement de changement fonctionnel

@jcfinnerup des idées sur la façon de tester cela? Comment créeriez-vous l'événement d'entrée (avec un assistant comme triggerEvent)?