2015-09-30 8 views
5

現在、Emberの新しいデータダウン、コンポーネントのアクションアップパラダイムについて学習しています。しかし、hereで説明したように、子コンポーネントがプロパティを明示的に変更できるようにしたい場合があります。これは、mutヘルパーが入る場所です。渡された値のラッパーを作成し、(readonly?)値とそれを更新する関数を含みます。このページの例は、カウンタをインクリメントする簡単なボタンの例です。新しいEmberコンポーネントの入力ヘルパーのベストプラクティス

コンポーネント内で入力ヘルパーを使用している場合、このコンセプトはどのように機能しますか?たとえば、のは、私は特別な形の部品の束で構成されてフォームを作成していましょう:

// templates/index.hbs 
<form> 
    {{form-control value=(mut model.firstValue)}} 
    {{form-control value=(mut model.secondValue)}} 
</form> 

フォームコントロールコンポーネントだけで入力コントロールをラップするタスクを持っている場合、どのように我々が使用します渡されたmutオブジェクトは正しくですか?それは何かのようなものですか?

// templates/components/form-control.hbs 
{{input type="text" value=attrs.value.value input=attrs.value.update}} 

ここで私の考え:入力要素の値は、MUTオブジェクトの値に設定され、オブジェクトは、入力値が変更(HTML5入力イベント)MUTの更新方法である時はいつでもモデルプロパティを新しい値に設定するために呼び出されます。私の思考には何か問題があるようですが、これはうまくいきません。今これを行う「標準的な」方法は何ですか?私はEmber 1.13.8を使用しています。

+2

ここで可変話して良い[記事](http://emberup.co/bindings-with-htmlbars-helpers/?utm_source=Ember+Weekly&utm_campaign=d59b972512-Ember_Weekly_Issue_125&utm_medium=email&utm_term=0_e96229d21d-d59b972512-10635538​​1は)だと読み込み専用ヘルパー。うまくいけば、それは助けるよ –

+0

タイラーありがとう、本当にそれを感謝します。残念ながら、それは私にはそれほど助けにはなりませんでした。これは、コンシューマからのビュー、つまり、値の読み取り専用バージョンの作成方法と更新するアクションを示し、どちらもコンポーネントに渡されます。私が何か誤解しない限り、これはmutヘルパーもやっていることです(つまり、値の読み取り専用バージョンとそれを更新するアクションを作成します)。入力ヘルパーでこれらの2つの成分を使用したい場合、私は紛失してしまいます...入力に読み取り専用の値をバインドするにはどうしたら、入力が変更されたときに更新メソッドを呼び出すのですか? – sammy34

答えて

2

古典的なコンポーネント(光沢のあるコンポーネントとは対照的に)では、すべてのバインディングが変更可能ですので、通常はmutヘルパーを使用する必要はありません。以下では正常に動作する必要があります:

// templates/index.hbs 
<form> 
    {{form-control value=model.firstValue}} 
    {{form-control value=model.secondValue}} 
</form> 

// templates/components/form-control.hbs 
{{input type="text" value=value}} 

mutヘルパーの両方のとattrsの使用目的は、現在Ember.js'安定版リリースでリリースされていないアングルブラケットコンポーネントと呼ばれるかすかなコンポーネントのためのものです。

関連する問題