Ember.js: 输入操作on =“ change”不会触发

奇怪：

解决方法： http :

这类似于＃10305

这在验收测试中确实很烦人，其中fillIn助手不会触发任何“ keyup”事件，因此我必须这样做：

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

如果我希望事件能够正确触发（因为我无法使用change事件，这可能是由fillIn触发的）。

@Fryie-与这里报告的问题无关。 虽然似乎类似于https://github.com/emberjs/ember.js/pull/11016 。

抱歉，我只想指出'keyup'并非可行的解决方法，因此从某种意义上来说是相关的。 :)

@stefanpenner ： @JKGisMe和我最近发现，使用{{input}}助手不会触发指定事件的动作。 这是更详细的示例： http :

（@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" ，但是我不确定这是我们目前打算支持的东西。

好的，是的，我必须在HTML输入版本的更改操作中添加(mut model.value) 。

这使我想知道...如果您不能真正使用{{input ，那有什么意义呢？ 感觉<input是有缺陷的，因为您不能轻松地通过hbs进行2种方式的绑定，但同时{{input由于其事件处理限制而有些无法使用。 我们是否最好不要完全没有{{input以免混淆事情？

@JKGisMe-嗯？ {{input}}有何缺陷？ 它可以正常工作，并且被大多数Ember应用程序使用，没有发生任何事件。

所以在上面的旋转中...您将如何使用{{input完成所有这些操作？

在我的工作项目中，我无意间在所有输入框出现之前都对所有输入框使用html方式，但是现在我想知道是否是因为我有大量的操作附加到以这种方式工作的事件上。 ：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-understanding_咬了。 以下内容是关于何时在组件中使用哪种形式的输入的正确但简化的指南吗？

| 用例| {{input}}与<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'}}行为不同：第一个通过事件侦听器，而第二个则不这样做。 那是故意的吗？

我对此有问题，并且如果输入的值发生更改，则需要更改保存按钮。 我发现，如果您在表单中设置输入并在表单本身上设置操作“更改”，则只要更改表单中的输入之一，该操作就会运行。

在这里旋转： https ://ember-twiddle.com/ = templates.application.hbs%2C

请在此处查看事件名称： http ://emberjs.com/api/classes/Ember.View.html#toc_event -names

如果这不是您遇到的问题，请忽略此😄。

@ jfuqua390您的旋转链接
”
在这里旋转： https ://ember-twiddle.com/ = 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我尝试了您的工作（承认是在旧版本的余烬上），并收到以下错误：

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的帮助器）？