Ember.js: input action on = "change" tidak menyala

aneh:

bekerja di sekitar: http://emberjs.jsbin.com/yedigeyeda/1/edit?html , js, konsol, keluaran

Ini mirip dengan # 10305

ini sangat mengganggu dalam tes penerimaan, di mana fillIn helper tidak akan memicu acara "keyup", jadi saya harus melakukan:

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

jika saya ingin peristiwa diaktifkan dengan benar (karena saya tidak dapat menggunakan peristiwa perubahan, yang mungkin akan dipicu oleh fillIn ).

@Fryie - Itu tidak terkait dengan masalah yang dilaporkan di sini. Tampaknya mirip dengan https://github.com/emberjs/ember.js/pull/11016 .

Maaf, saya hanya ingin menunjukkan bahwa 'keyup' bukanlah solusi yang layak, jadi dalam arti tertentu itu terkait. :)

@stefanpenner : @JKGisMe dan saya baru-baru ini menemukan bahwa menggunakan {{input}} helper tidak memicu tindakan untuk peristiwa tertentu. Berikut adalah contoh yang lebih detail: http://ember-twiddle.com/0830f4ed9f15df59801e

(twiddle oleh @JKGisMe)

Sebenarnya banyak acara tidak berfungsi pada pembantu input sekarang, termasuk apa pun yang terkait dengan mouse.

Ya, saya melacak ini. Akan mencoba mengisi apa yang terjadi saat tidak seluler.

Ini masalah serius. Menyetel dua dan lebih tindakan tidak bisa dilakukan untuk input helper. Tidak dapat dipercaya bahwa Ember 2.0.0 masih belum memiliki atribut seperti on-input = "" dan on-change = "".
Semoga ini akan diperbaiki secepatnya ...

Saya belum menguji _all_ tindakan tetapi saya baru saja berhasil menggunakan ini:

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

Anda juga dapat menggunakan versi html kuno dan tindakan hbs untuk mencapainya.

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

Sekarang ini mendukung ini:

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

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

Ya, saya pikir masalah ini melaporkan regresi dengan {{input action="foo" on="focus-in"}} (yang alias {{input focus-in="foo"}} ), tetapi saya salah (yang berfungsi dengan baik dengan salah satu peristiwa yang tercantum di atas).

Ini secara khusus tentang penggunaan on="change" , tetapi saya tidak yakin bahwa ini adalah sesuatu yang ingin kami dukung saat ini.

ok jadi ya, saya harus menambahkan (mut model.value) ke action on change untuk versi input html.

Yang membuat saya bertanya-tanya ... apa gunanya memiliki {{input jika Anda tidak bisa menggunakannya? Rasanya <input cacat karena Anda tidak bisa dengan mudah melakukan pengikatan 2 cara dengan hbs tetapi pada saat yang sama {{input agak tidak dapat digunakan karena pembatasan penanganan eventnya. Bukankah lebih baik kita tidak memiliki {{input sama sekali agar tidak membingungkan?

@JKGise - Hah? Bagaimana {{input}} cacat? Ia bekerja dan digunakan oleh sebagian besar aplikasi Ember tanpa insiden ....

Jadi di teka-teki yang ditautkan di atas ... Bagaimana Anda akan melakukan semua itu dengan {{input ?

Dalam proyek kerja saya, saya secara tidak sengaja akhirnya menggunakan cara html untuk semua kotak input sebelum ini dibawa tetapi sekarang saya bertanya-tanya apakah itu karena saya memiliki banyak tindakan yang dilampirkan ke acara yang baru saja bekerja dengan cara ini .... : P terlalu buruk dev tidak benar-benar ingat.

@rwjblue Harapan saya saat menggunakan {{input}} helper adalah bahwa itu adalah gula sintaksis untuk membuat input HTML, sambil melakukan pengikatan dua arah untuk nilai dan peristiwa pengikatan. {{input}} bukanlah pengikatan satu-ke-satu untuk acara karena Anda tidak dapat menggunakan click atau change untuk mengikat langsung ke tindakan. Anda harus menggunakan salah satu acara yang didokumentasikan.

Membaca panduan tentang ini paling menyesatkan karena tidak disebutkan apa yang tidak dapat Anda gunakan sebagai masukan.

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

Terutama, bagian tindakan memberi Anda tautan ke semua peristiwa dan memberi tahu Anda untuk membuatnya lebih sederhana. Tidak sampai Anda menggali dan akhirnya mencapai halaman ini:

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

Dimulai dengan pernyataan ini: "Helper mengizinkan beberapa peristiwa pengguna untuk mengirim tindakan."

Bahwa Anda menyadari bahwa Anda tidak akan gila dan click tidak akan berhasil.

Saya tidak mengatakan itu salah; hanya tak terduga. Ini menyebabkan saya melompat ke Slack dan bertanya mengapa. Saya disambut dengan orang-orang yang sama bingungnya dengan saya.

Saya ingin tahu apakah sudah ada pembaruan tentang ini

Saya baru mengenal Ember dan menghabiskan satu jam terakhir melacak yang satu ini. Tidak yakin apakah ini karena saya baru saja bertobat dari Angular dan saya terbiasa memiliki ng-change tersedia untuk saya.

Saat ini saya masih tidak yakin tindakan apa itu atau merasakan apa artinya bagi saya sehingga saya bahkan tidak tahu apa yang harus dicari.

Terlepas dari itu, saya menyukai kerangka ini. Berasal dari Angular, semua yang ada di sini terasa dipikirkan dengan baik dan jauh lebih konsisten.

Edit: Tidak ada tindakan yang diperlukan dari posting ini. Saya baru saja memberi umpan balik.

@rwjblue @morganick Saya digigit oleh _miss-pemahaman_ ini juga. Apakah pedoman berikut ini benar, meskipun disederhanakan, tentang kapan harus menggunakan bentuk apa untuk input dalam sebuah komponen?

| Kasus penggunaan | {{input}} vs <input> |
| --- | --- |
| Amati nilai pada input | {{input}} atau <input> |
| Kotak centang dengan tindakan | <input {{action="actionName" on="change"}} (untuk menjaga click-event memperbarui properti _checked_ kotak centang; Perhatikan bahwa pengamat di _checked_ tidak aktif dan properti _checked_ kotak centang tidak dapat diakses (*); Perhatikan juga bahwa mengikat click dengan cara ini merusak perilaku toggling kotak centang (!)); |
| Jenis masukan lainnya | {{input}} jika acara didukung oleh Ember.TextSupport sebaliknya <input> |

Saya juga berpikir bahwa kita harus mengubah bagian Tindakan & Kotak Centang di sini .

* ... IMO Satu-satunya cara untuk mendaftarkan penangan tindakan dan mengakses nilai _checked_ kotak centang dengan andal adalah dengan menggunakan formulir onClick={{action "actionName"}} dan memeriksa ev.target.checked di pengendali tindakan. Saya juga memperhatikan bahwa onClick={{action "actionName"}} dan {{action "actionName" on='click'}} berperilaku berbeda: yang pertama melewati event-listener, sedangkan yang kedua tidak melakukan itu. Apakah itu dimaksudkan?

Saya mengalami masalah dengan ini dan saya perlu mengubah tombol simpan jika nilai input berubah. Saya menemukan bahwa jika Anda mengatur masukan Anda di dalam formulir dan mengatur tindakan "perubahan" pada formulir itu sendiri, tindakan itu akan menjalankan tindakan setiap kali salah satu masukan dalam formulir diubah.

Putar di sini: https://ember-twiddle.com/?openFiles=templates.application.hbs%2C

Lihat Nama Peristiwa di sini: http://emberjs.com/api/classes/Ember.View.html#toc_event -names

Jika ini bukan masalah yang Anda alami, abaikan saja ini 😄.

@ jfuqu390 Tautan
"
Putar di sini: https://ember-twiddle.com/?openFiles=templates.application.hbs%2C
"
tidak berfungsi, dapatkah Anda memperbarui?

BTW, memberikan solusi saya kepada siapa pun yang datang ke sini.

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

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

@ldong Saya mencoba pekerjaan Anda (memang di ember versi lama) dan menerima kesalahan berikut:

Uncaught ReferenceError: Invalid left-hand side in assignment

Tidak yakin apakah saya melewatkan sesuatu?

Bagi siapa pun yang masih berjuang dengan ini, ini tampaknya berfungsi dengan baik:

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

Disalin dari Stackoverflow

@EricSchank @Fryie @JKGisMe @MarkMT @SillyButt @abepetrillo @davidsteinberger @greyhwndz @jcfinnerup @ jfuqua390 @ldong @locks apakah ini masih menjadi masalah, mungkin kita harus menutup atau membuat reproduksi baru tentang ini, bagaimana menurut Anda?

Menutup untuk saat ini ada banyak cara untuk membuat acara perubahan yang berfungsi

@jcfinnerup ada ide tentang cara menguji ini? Bagaimana Anda membuat acara input (dengan pembantu seperti triggerEvent)?