Emberコンポーネントのプロパティを別のコンポーネントから設定するにはどうすればよいですか？

Question

は、だから私は、これは持っている...

application.hbsを使用すると、EnabledプロパティをTrueに設定するときに開くようになっているモーダルウィンドウのコンポーネントを持っているこのアプリの一部を作成しました：

モーダルで

{{#modal-window enabled=true title="Manage Admins"}} 
{{/modal-window}} 

-window.js私はthis.set('enabled',false)を行う同様のcloseModalアクションを持っており、同様にそれを開くにはtrueに設定します。

などさまざまなコンポーネントのヘルプリンク、管理者リンク、管理リンクを使用して、アプリの下部にあるナビゲーションメニューも独自HBSとのjsファイルとコンポーネントであります。これがアプリのデザイン方法です。 index.hbsの下部には：

<div class="configs-list-footer"> 
{{help-link}} 
{{admin-link action='showModal'}} 
<div class="logout-link"> 
    <a {{action 'invalidateSession'}} class="tv-icon"> 
    <svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><g transform="translate(1.000000, 1.000000)"><path d="M0.347826087,8 L10.7826087,8"></path><polyline id="Stroke-937" points="8 5.2173913 10.7826087 8 8 10.7826087"></polyline><path d="M1.03123478,4.83526957 C2.23471304,2.18831304 4.90253913,0.347617391 8.00027826,0.347617391 C12.2263652,0.347617391 15.6524522,3.77370435 15.6524522,7.9997913 C15.6524522,12.2258783 12.2263652,15.6519652 8.00027826,15.6519652 C4.88862609,15.6519652 2.21036522,13.7952696 1.01453913,11.1288348"></path></g></g></svg> 
    <span>Logout</span> 
    </a> 
</div> 

アクション管理者-link.jsファイル内のアクションが呼び出されますが、真に有効に設定するには、モーダルウィンドウを言うする方法はないように思えます任意のプログラムの基本機能であるそれ自身の外側から。

インターネットを検索した後、私の人生のためにできないのは、admin-linkコンポーネント（これは基本的にアンカータグです）をクリックすると、modal-windowの 'enabled'プロパティをtrueに設定する方法です）..

私はインデックスのルートからアクションを呼び出す方法を見出したが、その後、ちょうどと成分を持つように私は、インデックスのルートからのモーダルウィンドウのプロパティを変更する方法を見つけ出すことはできません。

いつでも誰でもオンライン彼らは「コンポーネントが単離され、他のすべてを知らないしなければならない」UIのための基本的なので、何かをする明白な方法とで満たされているこれを行う方法を尋ねます。私はエンバー2.12.1

Answer 1

を使用してい

それはあなたの正確な質問への答えではないのですが、私たちはモーダルに使用するアプローチは、むしろコンポーネントのプロパティ作るよりも条件付きでコンポーネントをラップすることです。例えば

{{#if manageAdminsIsOpen}} 
    {{#modal-window title="Manage Admins"}} 
    {{/modal-window}} 
{{/if}} 

と、コントローラ上のアクションがmanageAdminsIsOpenを切り替えるために使用されます。

私はan exampleを示すエンバーひねりを作りました。

Answer 2

これはEmberの質問です。しかし、私は非常にあなたがQuick start documentation of Reactを行くことをお勧めします。コンポーネント指向のフロントエンド開発については、かなり良い説明があります。 Lifting state up sectionには特定のフレーズが1つあります：「多くの場合、いくつかのコンポーネントが同じ変更データを反映する必要があります。共有状態を最も近い共通の祖先まで持ち上げることをおすすめします。

これはあなたの場合です。モーダルダイアログを表示している状態は、modal-windowには属しません。なぜなら、他の場所からそれを切り替える必要があるからです。したがって、共通の祖先でこの状態を管理する必要があります。あなたのケースではapplication.jsコントローラだと思います。したがって、アクションはコントローラのapplicationまでバブリングする必要があります（モーダルダイアログの終了は、アクション内でコントローラapplicationによって実行されることを意味します）。あなたの質問について

、私の知る限り、あなたが別のコンポーネント内からコンポーネントのプロパティを設定することができる方法はありません。私が一般的に適用する手法は、状態を共通の祖先に持ち上げることです。まれに、serviceを作成し、アプリケーション全体の状態を維持するためにサービス内の属性と関数を定義することを好みます。したがって、この2番目の方法を使用する場合は、両方のコンポーネントにサービスを注入することができ、一方のコンポーネントはサービスに属する状態を表示できますが、もう一方のコンポーネントはサービス内の関数を通じてサービスを変更できます。

あなたは、分離されているコンポーネントについて正しくあります。しかし、単独で単独で動作するコンポーネントは役に立たない。コンポーネントは所有者の属性を受け入れ、作業するためのアクション（イベント）を提供する必要があります。データを原則的に適用することを忘れないでください。一般的に、状態を上げるという原則ではうまくいきます。これは長い記述です。それが助けになることを願っています。