Ember 2.11.Xアクションハンドラによる入力値とコンポーネントの取得方法

Question

問題：入力フィールドコンポーネントから変更された値をアクションに転送したいが、最初の値のみを受け取る。

コントローラは可変幅を最初は100で保持しますが、入力フィールドで変更された値の後に更新する必要があります。この場合

 <form {{action 'resizePanel' value on="submit"}} class="form-inline waves-effect waves-light" style="width:50px"> 
       {{input-field type="text" value=width classNames="form-control" style="width:50px; color:white"}} 
     </form> 

自衛隊

Answer 1

あなたinput-helperコンポーネントがEmber.TextField、あなたが送信する必要はありませんを拡張する場合アクションヘルパーへの議論。

Twiddle-Link

入力helper.jsコンポーネントファイル

import Ember from 'ember'; 
export default Ember.TextField.extend({ 
}); 

application.hbs、あなたはここでアクションヘルパーから

<form {{action 'setWidth' on='submit'}}> 
{{input-helper type="text" value=width class="form-control" style="width:50px; color:black"}} 
</form> 

Answer 2

、私はあなただけactionヘルパーにwidthを渡すことができると思います。

<form {{action 'resizePanel' width on="submit"}} class="form-inline waves-effect waves-light" style="width:50px"> 
    {{input-field type="text" value=width classNames="form-control" style="width:50px; color:white"}} 
</form> 

Answer 3

を幅引数を削除することができ、あなたの提供する理由説明がありtwiddle動作しません。入力タグ付きの独自のコンポーネントを作成しました。あなたはvalueと属性のバインディングを行いました。コンポーネントのvalueフィールドをhtml input要素のvalue属性にバインドすることは何もしていません。

EmberのTextFieldコードを見てください。それはTextSupportというミックスインを使用しています。ソースコードを見ると、Ember自体がHtml DOM Eventsを処理していることがわかります。したがって、application.jsで定義されたwidthへの双方向バインディングが機能していないことは当然です。 input-helperコンポーネント内のvalueプロパティの値が、DOMイベントを処理することによってvalue html属性と同期されていないためです。つまり、value属性の変更は、コンポーネントのvalueプロパティに反映されていません。

ここでは何ができますか？

• thisのように組み込みのinput Emberのヘルパーを使用するだけで動作します。
• 独自のコンポーネントを使用する場合は、EmberのようなDOMイベントを処理してください。 Emberから取られたイベント処理の非常にsimplified versionでさえ、仕事をします。上記のEmberのTextSupportミックスインを使用することもできます。