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

所以我創造了這個應用程序，有一個應該在設置啓用真正的財產，以打開一個模式窗口組件的一部分。這如何從另一個組件設置Ember組件的屬性？

application.hbs有這樣的：

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

在模態-window.js我有一個動作closeModal，this.set('enabled',false)，同樣打開它，你把它設置爲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文件的行動，但似乎有沒有辦法告訴模態窗口的操作來設置啓用爲true從本身的外部這是任何程序的基本功能。

在網上搜索了幾個小時後，我不能爲了我的生活找出如何在點擊管理鏈接組件時簡單地將模式窗口的'enabled'屬性設置爲true（這基本上是一個錨標籤）..

我已經找到了如何調用從索引路線的動作，但後來就像使用組件組件我無法弄清楚如何模態窗口的屬性從指數路徑改變。

每當有人問網上如何做到這一點，他們都遇到了「部件應進行隔離，並沒有意識到一切的」，沒有明顯的方式做事情如此基本的UI。

我用灰燼2.12.1

來源

2017-04-13 Rose Nation

這不是一個回答您的具體問題，但我們使用的情態動詞的辦法是包裹組件的條件，而不是使其成爲組件的屬性。例如

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

然後對控制器的操作用於切換manageAdminsIsOpen。

我提出的灰燼玩弄表示an example。

來源

2017-04-13 21:02:24 mikej

我有一個條件的模態窗口本身但這是一個好主意。然後，我可以從路由本身中處理該條件，而不是從組件中進行操作。仍然希望僅爲了未來目的而看到我的問題的答案。我們的整個應用程序由Ember由外部承包商構建，我將不得不學習它。 –

所以我把這個代碼在那裏，但我不知道在哪裏定義manageAdminsIsOpen ..我想我從指數路由的行動this.set（「manageAdminsIsOpen」）設置它，但我不能得到它的工作。 –

我對此感到困惑。我有application.hbs，application.js，index.js，index.hbs和其他很多文件，就像在官方的ember文檔中我從來沒有任何線索要把代碼放在哪個文件中。我只是試圖把每個JS文件中的管理員管理都在Ember擴展部分中作爲對象的屬性，或者僅在JavaScript外部的塊中使用，無論我放在哪裏，它都不起作用。只要將「manageAdminsIsOpen」放在該塊中就可以定義它？它是否必須在某處明確定義？ –

我知道這是一個Ember問題;但我強烈建議你去Quick start documentation of React。關於面向組件的前端開發有相當好的解釋。 Lifting state up section中存在一個特定的短語如下：「通常，幾個組件需要反映相同的更改數據，我們建議將共享狀態提升到最接近的共同祖先。」

這是你現在的情況。顯示模態對話框的狀態不屬於modal-window本身，因爲您需要從其他地方切換它。因此，你需要在共同的祖先中管理這個狀態;那就是你的情況下的application.js控制器。因此，動作應該鼓起來，直到控制器（我的意思是即使關閉模態對話框也應該在動作中由application控制器執行）。

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

你是對自己被隔離的組件。然而，單獨獨立工作的組件是無用的;組件應接受來自所有者的屬性，並應提供可操作的操作（事件）。不要忘記將數據應用於行動原則，並且通常適用於解除狀態原則。這是一個長期的描述;但我希望這會有所幫助。

來源

2017-04-13 21:13:50 alptugd

我認爲你想說的是mikej下面說的或者主要是他寫的代碼示例。我理解這兩個，但既不能解決我的問題，因爲我不知道如何使其工作。 application.js，index.js，app.js，xyz.js ..我不知道該把什麼放在哪裏，因爲從來沒有人說過，所有東西都是「放在」控制器中「而不說什麼血腥的地獄」它「是和哪個控制器，哪個文件是明確的，以及將文件放在哪裏。我看到它放在Ember.whatever.extend之外的例子，它放在對象中的例子等等。 –

我會盡量讓你一個非常簡單的演示你的情況，當我有時間的時候。 – alptugd

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

回答

相關問題