如何從另一個組件設置Ember組件的屬性？

Question

所以我創建了這個應用程序的一部分，它有一個模態窗口組件，當你將屬性設置為true時，它應該打開。

application.hbs有這個：

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

在modal-window.js中我有一個動作closeModal執行this.set('enabled',false)並同樣打開它，你將它設置為true。

應用程序底部有一個導航菜單，它使用不同的組件help-link，admin-link等.admin-link也是一個擁有自己的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>

那里的動作在admin-link.js文件中調用了一個動作，但似乎沒有辦法告訴模態窗口從OUTSIDE本身設置enabled為true，這是任何程序的基本功能。

在網上搜索了幾個小時后，我無法為我的生活找出如何在點擊admin-link組件（基本上是一個錨標簽）時簡單地將modal-window的'enabled'屬性設置為true。

我已經找到了如何從Index路由調用一個動作，但是就像組件到組件一樣，我無法弄清楚如何從Index路由改變modal-window的屬性。

任何時候有人在網上詢問如何做到這一點，他們會遇到“組件應該是孤立的，不知道其他一切”，沒有明顯的方法來做一些基本的UI。

我正在使用Ember 2.12.1

Answer 1

我知道這是一個Ember問題; 但我強烈建議你仔細閱讀React的快速入門文檔 。 面向組件的前端開發有很好的解釋。 提升狀態向上部分中存在一個特定的短語如下：“通常，有幾個組件需要反映相同的變化數據。我們建議將共享狀態提升到最接近的共同祖先。”

你現在就是這種情況。 顯示模態對話框的狀態不屬於modal-window本身，因為您需要從其他位置切換它。 因此，你需要在共同的祖先處理這種狀態; 那是application.js控制器在你的情況我猜。 因此，應該將操作冒泡到application控制器（我的意思是甚至關閉模式對話框應該由application控制器在一個操作中執行）。

關於您的問題，AFAIK沒有辦法從另一個組件中設置組件的屬性。 我通常應用的技術是將狀態提升到共同的祖先。 很少，我更喜歡創建service並在service定義屬性和功能以維護應用程序范圍的狀態。 因此，如果您更喜歡第二種方法，則可以將服務注入到兩個組件中，一個組件可以顯示屬於該服務的狀態，而另一個組件可以通過服務中的功能對其進行修改。

你對被隔離的組件是正確的。 然而，單獨工作的組件是無用的; 組件應接受所有者的屬性，並應提供要處理的操作（事件）。 不要忘記應用數據向下動作原則，它通常與提升狀態原則一起工作。 這是一個很長的描述; 但我希望它會有所幫助。

Answer 2

它不是您確切問題的答案，但我們用於模態的方法是將組件包裝在條件中而不是使其成為組件的屬性。 例如

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

然后使用控制器上的操作來切換manageAdminsIsOpen 。

我讓Ember Twiddle顯示了一個例子 。