Ember.js: ação de entrada em = "alterar" não dispara

estranho:

solução alternativa:

Isso é semelhante a # 10305

isso é realmente irritante em testes de aceitação, onde o fillIn helper não acionará nenhum evento "keyup", então tenho que fazer:

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

se eu quiser que os eventos sejam disparados corretamente (já que não posso usar o evento de mudança, que provavelmente seria disparado por fillIn ).

@Fryie - Isso não está relacionado ao problema relatado aqui. Mas parece semelhante a https://github.com/emberjs/ember.js/pull/11016 .

Desculpas, eu só queria apontar que 'keyup' não é uma solução alternativa viável, então em certo sentido está relacionado. :)

@stefanpenner : @JKGisMe e eu descobrimos recentemente que usar o auxiliar {{input}} não dispara ações para eventos especificados. Aqui está um exemplo mais detalhado: http://ember-twiddle.com/0830f4ed9f15df59801e

(mexer por @JKGisMe)

Na verdade, muitos eventos não funcionam no auxiliar de entrada agora, incluindo qualquer coisa relacionada ao mouse.

Sim, estou rastreando isso. Tentará preencher o que está acontecendo quando não estiver móvel.

Esse é um problema sério. Definir duas ou mais ações não pode ser não para auxiliar de entrada. Não consigo acreditar que o Ember 2.0.0 ainda não tenha atributos como on-input = "" e on-change = "".
Espero que isso seja corrigido o mais rápido possível ...

Não testei _todas_ as ações, mas apenas usei com sucesso:

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

Você também pode usar a versão antiga do html e as ações do hbs para alcançá-lo.

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

No momento, ele oferece suporte para:

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

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

Sim, pensei que esse problema estava relatando uma regressão com {{input action="foo" on="focus-in"}} (que tem o alias de {{input focus-in="foo"}} ), mas me enganei (isso funciona corretamente com qualquer um dos eventos listados acima).

Isso se refere especificamente ao uso de on="change" , mas não tenho certeza se pretendemos oferecer suporte no momento.

ok então sim, eu tenho que adicionar (mut model.value) para a ação de mudança para a versão de entrada html.

O que me leva a pensar ... de que adianta ter um {{input se você realmente não pode usá-lo? Parece que <input tem falhas porque você não pode simplesmente fazer uma ligação bidirecional com hbs, mas ao mesmo tempo {{input é um tanto inutilizável por causa de suas restrições de manipulação de eventos. Não seria melhor não ter os {{input para não confundir as coisas?

@JKGisMe - Hein? Como {{input}} falhas? Ele funciona e é usado por uma grande maioria de aplicativos Ember sem incidentes ....

Então, no enigma relacionado acima ... Como você faria tudo isso com {{input ?

Em meu projeto de trabalho, eu inadvertidamente acabei usando a forma html para todas as caixas de entrada antes que isso fosse trazido, mas agora estou me perguntando se foi bc eu tenho uma tonelada de ações anexadas a eventos que funcionavam dessa maneira .... : P pena que o desenvolvedor não se lembra.

@rwjblue Minha expectativa ao usar o auxiliar {{input}} era que ele fosse um açúcar sintático para criar uma entrada HTML, enquanto fazia uma ligação bidirecional para eventos de valor e ligação. {{input}} não é uma ligação um-para-um para eventos porque você não pode usar click ou change para ligar diretamente às ações. Você deve usar um dos eventos documentados.

Ler o guia sobre isso é muito enganoso porque não há menção do que você não pode usar como entrada.

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

Especialmente, a seção de ações fornece um link para todos os eventos e diz para você apenas selecioná-los. Só depois que você se aprofundou e finalmente chegou a esta página:

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

Começando com esta declaração: "O auxiliar permite que alguns eventos de usuário enviem ações."

Que você percebe que não está ficando louco e click não vai funcionar.

Não estou dizendo que isso é errado; apenas inesperado. Isso me fez pular no Slack e perguntar por quê. Fui recebido por pessoas tão perplexas quanto eu.

Eu me pergunto se já existe uma atualização sobre isso

Sou novo em Ember e passei a última hora rastreando este aqui. Não tenho certeza se é porque sou um recém-convertido do Angular e estou acostumado a ter ng-change disponíveis para mim.

No momento, ainda não tenho certeza do que são ações ou sinto o que significam para mim, então nem sabia o que pesquisar.

Independentemente disso, eu adoro essa estrutura. Vindo do Angular, tudo aqui parece bem pensado e muito mais consistente.

Editar: Nenhuma ação necessária para esta postagem. Eu estava apenas dando feedback.

@rwjblue @morganick Também fui mordido por este _miss-compreensão_ O que se segue é uma orientação correta, embora simplificada, sobre quando usar qual formulário para uma entrada em um componente?

| Caso de uso | {{input}} vs <input> |
| --- | --- |
| Observe os valores nas entradas | {{input}} ou <input> |
| Caixas de seleção com ações | <input {{action="actionName" on="change"}} (para manter o evento de clique atualizando a propriedade _checked_ da caixa de seleção; Observe que o observador em _checked_ não dispara e que a propriedade _checked_ da caixa de seleção não pode ser acessada (*); Observe também que a vinculação click desta forma quebra o comportamento típico de alternância das caixas de seleção (!)); |
| Outros tipos de entrada | {{input}} se o evento for apoiado por Ember.TextSupport, caso contrário <input> |

Também acho que devemos alterar a seção Ações e caixas de seleção aqui .

* ... IMO A única maneira de registrar um manipulador de ação e acessar o valor _checked_ da caixa de seleção de forma confiável é usar o formulário onClick={{action "actionName"}} e verificar ev.target.checked no manipulador de ação. Também notei que onClick={{action "actionName"}} e {{action "actionName" on='click'}} se comportam de maneira diferente: o primeiro passa pelo ouvinte de eventos, enquanto o segundo não faz isso. Isso é intencional?

Eu estava tendo problemas com isso e também precisava alterar um botão Salvar se os valores das entradas mudassem. Descobri que se você definir suas entradas dentro de um formulário e definir a ação "alterar" no próprio formulário, ela executará a ação sempre que uma das entradas do formulário for alterada.

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

Consulte os nomes dos eventos aqui: http://emberjs.com/api/classes/Ember.View.html#toc_event -names

Se este não for o problema que você está tendo, simplesmente ignore 😄.

@ jfuqua390 Seu link de
"
Twiddle aqui: https://ember-twiddle.com/?openFiles=templates.application.hbs%2C
"
não funciona, você pode atualizar?

BTW, só dando minha solução para quem vier aqui.

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

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

@ldong eu tentei contornar seu problema (reconhecidamente em uma versão antiga do ember) e recebi o seguinte erro:

Uncaught ReferenceError: Invalid left-hand side in assignment

Não tem certeza se estou perdendo alguma coisa?

Para qualquer um que ainda esteja lutando com isso, isso parece funcionar muito bem:

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

Copiado do Stackoverflow

@EricSchank @Fryie @JKGisMe @MarkMT @SillyButt @abepetrillo @davidsteinberger @greyhwndz @jcfinnerup @ jfuqua390 @ldong @locks ainda é um problema, talvez devêssemos fechar ou criar uma nova reprodução disso, o que você acha?

Fechando, por enquanto, há muitas maneiras de criar um evento de mudança funcional

@jcfinnerup alguma ideia sobre como testar isso? Como você criaria o evento de entrada (com um auxiliar como triggerEvent)?