Ember.js: input action on = "change" не срабатывает

странный:

работать вокруг: http://emberjs.jsbin.com/yedigeyeda/1/edit?html , js, console, output

Это похоже на # 10305

это действительно раздражает при приемочных тестах, где помощник fillIn не запускает никакого события "keyup", поэтому я должен сделать:

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

если я хочу, чтобы события запускались правильно (поскольку я не могу использовать событие изменения, которое, вероятно, будет вызвано fillIn ).

@Fryie - Это не связано с проблемой, описанной здесь. Хотя похоже на https://github.com/emberjs/ember.js/pull/11016 .

Извиняюсь, я только хотел указать, что «keyup» не является возможным обходным путем, так что в некотором смысле это связано. :)

@stefanpenner : @JKGisMe и я недавно обнаружили, что использование помощника {{input}} не запускает действия для определенных событий. Вот более подробный пример: http://ember-twiddle.com/0830f4ed9f15df59801e

(твидл от @JKGisMe)

На самом деле многие события сейчас не работают с помощником ввода, включая все, что связано с мышью.

Я отслеживаю это. Постараюсь залить, что происходит, когда не мобилен.

Это серьезная проблема. Установка двух и более действий не может выполняться для помощника ввода. Не могу поверить, что в Ember 2.0.0 до сих пор нет таких атрибутов, как on-input = "" и on-change = "".
Надеюсь, это будет исправлено как можно скорее ...

Я не тестировал _все_ действия, но просто успешно использовал это:

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

Вы также можете просто использовать старомодную версию html и действия hbs для этого.

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

Прямо сейчас он поддерживает это:

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

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

Да, я думал, что эта проблема связана с регрессией с {{input action="foo" on="focus-in"}} (который имеет псевдоним {{input focus-in="foo"}} ), но я ошибался (это правильно работает с любым из событий, перечисленных выше).

Речь идет конкретно об использовании on="change" , но я не уверен, что это то, что мы намерены поддерживать в данный момент.

Хорошо, так что да, мне нужно добавить (mut model.value) к действию при изменении для версии ввода html.

Это заставляет меня задаться вопросом ... какой смысл иметь {{input если вы действительно не можете его использовать? Кажется, что <input ошибочен, потому что вы не можете легко выполнить двухстороннюю привязку с hbs, но в то же время {{input несколько непригоден из-за ограничений на обработку событий. Не лучше ли нам вообще не иметь {{input чтобы не путать вещи?

@JKGisMe - А? В чем ошибка {{input}} ? Он работает и используется подавляющим большинством приложений Ember без происшествий ....

Итак, в твидле, указанном выше ... Как бы вы поступили со всеми этими {{input ?

В моем рабочем проекте я случайно закончил тем, что использовал способ html для всех полей ввода до того, как это появилось, но теперь мне интересно, было ли это bc. У меня есть тонна действий, связанных с событиями, которые просто работали таким образом ... : P Жаль, что разработчик не помнит.

@rwjblue При использовании помощника {{input}} ожидал, что он будет синтаксическим сахаром для создания ввода HTML, выполняя двустороннюю привязку для значений и событий привязки. {{input}} не является однозначной привязкой для событий, потому что вы не можете использовать click или change для прямой привязки к действиям. Вы должны использовать одно из задокументированных событий.

Чтение руководства по этому поводу вводит в заблуждение, потому что нет упоминания о том, что вы не можете использовать для ввода.

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

В частности, раздел действий дает вам ссылку на все события и предлагает вам просто помешать их. Только когда вы покопаетесь и, наконец, дойдете до этой страницы:

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

Начиная с этого утверждения: «Помощник позволяет некоторым пользовательским событиям отправлять действия».

Что вы понимаете, что не сойдете с ума, и click не пойдет.

Я не говорю, что это неправильно; просто неожиданно. Это заставило меня зайти в Slack и спросить, почему. Меня встречали такие же озадаченные люди, как и я.

Интересно, есть ли уже обновление по этому поводу

Я новичок в Ember и потратил последний час на поиски этого. Не уверен, что это из-за того, что я недавно перешел из Angular и привык, что мне доступны ng-change .

Прямо сейчас я все еще не уверен, что это за действия, или чувствую, что они значат для меня, поэтому я даже не знал, что искать.

Тем не менее, я обожаю этот фреймворк. Исходя из Angular, здесь все кажется хорошо продуманным и гораздо более последовательным.

Изменить: от этого сообщения не требуется никаких действий. Я просто давал обратную связь.

@rwjblue @morganick Меня тоже укусило это _miss-понимание_. Является ли нижеследующее правильным, хотя и упрощенным руководством о том, когда какую форму использовать для ввода в компоненте?

| Пример использования | {{input}} vs <input> |
| --- | --- |
| Соблюдайте значения на входах | {{input}} или <input> |
| Флажки с действиями | <input {{action="actionName" on="change"}} (чтобы событие щелчка обновляло свойство _checked_ флажка; Обратите внимание, что наблюдатель на _checked_ не срабатывает и что свойство _checked_ флажка недоступно (*); Также обратите внимание, что привязка click таким образом нарушает типичное поведение переключения флажков (!)); |
| Другие типы ввода | {{input}} если событие поддерживается Ember.TextSupport, в противном случае <input> |

Я также считаю, что нам следует изменить здесь раздел «Действия и флажки».

* ... IMO Единственный способ зарегистрировать обработчик действия и надежно получить доступ к _checked_ значению флажка - использовать форму onClick={{action "actionName"}} и проверить ev.target.checked в обработчике действия. Я также заметил, что onClick={{action "actionName"}} и {{action "actionName" on='click'}} ведут себя по-разному: первый передает обработчик событий, а второй - нет. Это предназначено?

У меня были проблемы с этим, и мне нужно было изменить кнопку сохранения, если значения входов изменились. Я обнаружил, что если вы установите свои входные данные внутри формы и установите действие «изменение» в самой форме, оно будет запускать действие каждый раз, когда один из входов в форме изменяется.

Twiddle здесь: https://ember-twiddle.com/?openFiles=templates.application.hbs%2C

См. Названия событий здесь: http://emberjs.com/api/classes/Ember.View.html#toc_event -names

Если проблема не в этом, просто игнорируйте это 😄.

@ jfuqua390 Твидл- ссылка
"
Twiddle здесь: https://ember-twiddle.com/?openFiles=templates.application.hbs%2C
"
не работает, можно обновить?

Кстати, просто даю свое решение всем, кто сюда приходит.

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

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

@ldong Я попробовал вашу работу (по общему признанию, на старой версии ember) и получил следующую ошибку:

Uncaught ReferenceError: Invalid left-hand side in assignment

Не уверены, что я что-то упускаю?

Для тех, кто все еще борется с этим, кажется, что это работает нормально:

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

Скопировано из Stackoverflow

@EricSchank @Fryie @JKGisMe @MarkMT @SillyButt @abepetrillo @davidsteinberger @greyhwndz @jcfinnerup @ jfuqua390 @ldong @locks , это все еще проблема, возможно, нам следует закрыть или создать новую репродукцию, как вы думаете?

На данный момент закрытие. Есть много способов создать рабочее событие изменения.

@jcfinnerup есть идеи, как это проверить? Как бы вы создали событие ввода (с помощью такого помощника, как triggerEvent)?