Ember.js: 入力アクションon = "change"は起動しません

奇妙な：

回避策： http ：

これは＃10305に似ています

これは、 fillInヘルパーが「キーアップ」イベントをトリガーしない受け入れテストでは本当に厄介なので、次のことを行う必要があります。

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

イベントを適切に発生させたい場合（変更イベントを使用できないため、おそらくfillInによってトリガーされます）。

@ Fryie-これは、ここで報告されている問題とは関係ありません。 ただし、 https：//github.com/emberjs/ember.js/pull/11016に似ているようです。

申し訳ありませんが、「キーアップ」は実行可能な回避策ではないため、ある意味で関連していることを指摘したいと思います。 :)

@stefanpenner ： @JKGisMeと私は最近、 {{input}}ヘルパーを使用しても、指定したイベントのアクションがトリガーされないことを発見しました。 より詳細な例を次に示します。http ：

（@JKGisMeによるいじり）

実際、マウスに関連するものを含め、多くのイベントは現在入力ヘルパーでは機能しません。

ええ、私はこれを追跡しています。 モバイルでないときに何が起こっているかを記入しようとします。

これは深刻な問題です。 2つ以上のアクションを設定することは、入力ヘルパーには当てはまりません。 Ember2.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を使用して双方向バインディングを簡単に実行できないために欠陥があるように感じますが、同時に{{inputは、イベント処理の制限のために多少使用できません。 物事を混乱させないために、 {{inputをまったく持たないほうがいいのではないでしょうか。

@ JKGisMe-え？ {{input}}はどのような欠陥がありますか？ これは機能し、Emberアプリケーションの大多数で問題なく使用されています。

それで、上でリンクされたひねりで...あなたは{{inputそれらすべてをどのように行いますか？

私の作業プロジェクトでは、これが表示される前に、誤ってすべての入力ボックスにhtmlの方法を使用することになりましたが、今はbcであるかどうか疑問に思っています。このように機能したイベントに、大量のアクションが添付されています。 ：P残念ながら、開発者は実際には覚えていません。

@rwjblue {{input}}ヘルパーを使用するときの私の期待は、値とバインディングイベントの双方向バインディングを実行しながら、HTML入力を作成するための構文糖衣構文であるということでした。 {{input}} clickまたはchangeを使用してアクションに直接バインドすることはできないため、 {{input}}はイベントの1対1のバインドではありません。 文書化されたイベントの1つを使用する必要が

これに関するガイドを読むことは、入力に使用できないものについての言及がないため、最も誤解を招く可能性があります。

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

特に、アクションセクションには、すべてのイベントへのリンクが表示され、それらをダッシュ​​するように指示されます。 あなたが掘り下げて最終的にこのページに到達するまで、それはありません：

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

このステートメントから始まります。「ヘルパーは、一部のユーザーイベントがアクションを送信することを許可します。」

気が狂うことはなく、 clickが機能しないことに気づきました。

私はそれが間違っていると言っているのではありません。 予想外。 これにより、私はSlackに飛び込んで、理由を尋ねました。 私は私と同じように当惑した人々に迎えられました。

これについてはすでに更新があるのだろうか

私はEmberを初めて使用し、最後の1時間でこれを追跡しました。 これは、私がAngularからの最近の変換であり、 ng-change利用できることに慣れているためかどうかはわかりません。

今のところ、アクションが何であるか、またはそれらが私にとって何を意味するのかをまだ理解していないので、何を検索すればよいのかさえわかりませんでした。

とにかく、私はこのフレームワークが大好きです。 Angularから来て、ここのすべてはよく考えられて、はるかに一貫していると感じます。

編集：この投稿からのアクションは必要ありません。 私はただフィードバックをしていました。

@ rwjblue @ morganick私もこの_誤解_に噛まれました。 以下は、コンポーネントの入力にどのフォームをいつ使用するかについての簡略化されたガイドラインですが、正しいですか？

| ユースケース| {{input}} vs <input> |
| --- | --- |
| 入力の値を観察する| {{input}}または<input> |
| アクション付きのチェックボックス| <input {{action="actionName" on="change"}} （クリックイベントでチェックボックスの_checked_プロパティを更新し続けるため。_checked_のオブザーバーは起動せず、チェックボックスの_checked_プロパティにはアクセスできないことに注意してください（*）; clickバインドにも注意してください。このように
| その他の入力タイプ| イベントがEmber.TextSupportでサポートされている場合は{{input}} 、それ以外の場合は<input> |

また、ここで[アクションとチェックボックス]セクションを変更する必要があると思い

アクションハンドラとのアクセスを登録する* ... IMOの唯一の方法は、チェックボックスの_checked_値が確実にフォームを使用することですonClick={{action "actionName"}}チェックev.target.checkedアクションハンドラインチまた、 onClick={{action "actionName"}}と{{action "actionName" on='click'}}動作が異なることに気付きました。最初のイベントリスナーはイベントリスナーを通過し、2番目のイベントリスナーは通過しません。 それは意図されていますか？

これに問題があり、入力の値が変更された場合は保存ボタンを変更する必要がありました。 フォーム内に入力を設定し、フォーム自体にアクション「変更」を設定すると、フォーム内の入力の1つが変更されるたびにアクションが実行されることがわかりました。

ここでひねる： https ：//ember-twiddle.com/？openFiles = templates.application.hbs％2C

ここでイベント名を参照してください： http： //emberjs.com/api/classes/Ember.View.html#toc_event -names

これがあなたが抱えている問題ではない場合は、これを無視してください😄。

@ jfuqua390あなたのひねりリンク
「」
ここでひねる： 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私はあなたの

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のようなヘルパーを使用して）入力イベントをどのように作成しますか？