如何將控制器數據傳遞到組件並備份在燼js

我有一個擁有用戶路由獲取用戶模型的燼2.13應用程序。因此，在用戶模板中，我顯示了所有抓取的用戶。我也有一個用戶控制器，當用戶點擊時將數據提供給編輯表單。我正在使用用戶控制器來執行此操作。如何將控制器數據傳遞到組件並備份在燼js

所有代碼都在單個模板中，但我想將渲染用戶列表和編輯用戶表單分成兩個獨立的組件。比方說，我製作了一個渲染單用戶和編輯用戶模板。因此，當用戶點擊使用render-single-user組件呈現的用戶時，該用戶的數據應該顯示在由edit-user組件呈現的dom中。

問題是組件無法訪問路由模型或應用商店。

如果有人告訴我如何傳遞模型並將其從控制器存儲到組件以及渲染單用戶和編輯用戶組件之間，我將不勝感激。當用戶點擊更新/保存時，修改後的數據應傳送到控制器並將記錄保存到商店，從而向服務器發送發佈請求。

附上截圖。

用戶查看

點擊的用戶

來源

2017-09-21 Ashokaditya

這個答案適用於2.x.x並寫成的2.15版本。

這聽起來像你剛剛在Ember開始。歡迎！我強烈建議你做Tutorial並閱讀The Guides。他們是一種投資 - 事情會變得更快，並且事後更容易。我要告訴你的一切都可以在那裏找到。它們不可跳過。

在你的用戶的路線：

model() { 
    return this.store.findAll('users') 
}

在用戶控制器：

actions: { 
    consoleLogger(thingToLog) { 
    console.log(thingToLog) 
    } 
}

數據和行動，從控制器和路線傳下來的部件。這是通過把手模板完成的。

傳球動作，模型和變量到組件的通用示例：

{{some-component 
    someControllerVariable=someControllerVariable 
    mode=model 
    consoleLogger=(action "consoleLogger")}}

然後在你的組件，你可以使用這樣的操作：

<button {{action consoleLogger "string to log"}}>Log it</button>

或者用它在你的組件js是這樣的：

this.get('consoleLogger')("string to log"); 
// this.get retrieves the function and then we call it with an argument, kind of like how you'd do someOtherFunction() in plain js

既然你需要顯示助手列表，你會需要你的路線，使用each helper：

{{#each users as |user|}} 
     {{user-list-item 
     someControllerVariable=someControllerVariable 
     user=user 
     consoleLogger=(action "consoleLogger")}} 
{{/each}}

當動作在你的組件中使用，你可以把記錄作爲參數。他們將進入控制器操作，這就是您應該執行POST/PATCH/DELETE類型操作（如save（））的位置。

祝你好運:)

來源

2017-09-21 13:20:05 handlebears

感謝@handlebears的提示又冗長的答覆:)我已閱讀指南和教程幾次，但我想我有點忘了哪個用什麼。儘管您的詳細建議有幫助。再次感謝一堆。 – Ashokaditya

@Ashokaditya歡迎:) – handlebears

如何將控制器數據傳遞到組件並備份在燼js

回答

相關問題