Ember - 擴展{{component}}幫助器

我想要做的是將字符串傳遞給{{component}}幫助程序，但我希望更多地控制它在運行時傳入的字符串。Ember - 擴展{{component}}幫助器

例如

// getComponentToRender will get the current UI theme in the app, 
// determine whether it's running on the mobile mode, then fetches the 
// appropriate name of a component to render based on the type of the 
// component. Just an example. 
{{component getComponentToRender(ComponentType.Button)}}

我調查了這一點，事實證明這是不可能的（否則，請糾正我）。當然，有computed屬性，但它不需要參數。

接下來，我看着擴展幫手。 This stackoverflow問題顯示您可以擴展一個，但我找不到Ember中幫助器位於component的位置。似乎也沒有任何關於擴展現有幫助者的問題/文檔。這是我會用這種方法做的。

// I can't find where the {{component}} helper is located. 
import Component from './???' 

export default Component.extend({ 
    compute(componentType, hash) { 
     let componentName = getComponentToRender(componentType); 
     this._super(componentName, hash) 
    } 
})

我錯過了什麼？如果有人能讓我走向正確的方向，那將會很棒。

來源

2017-04-12 CookieMonster

也許結帳[flexi]（https://flexi.readme.io/docs） – Lux

Flexi是一個UI框架。我的問題與此無關。 – CookieMonster

Flexi正在解決您想要的任務：如何爲同一個組件創建多個佈局。所以也許它可以幫助你檢查他們是如何解決這個問題的。只是想指出你，對不起。我認爲這對你很有趣。 – Lux

-1

從模板調用函數的唯一方法是編寫一個幫助程序。其實你的參考StackOverflow問題也提到有關幫手。 Writing an helper將解決您的問題。

您不需要擴展component幫手。你需要撰寫它。如下：

{{component (getComponentToRender ComponentType.Button)}}

這是working twiddle。

來源

2017-04-12 22:15:14 ykaragol

感謝您的回答。我沒有試過，因爲我出來了，但我看看。要回答你的問題，我可以爲不同的目的使用同一款應用的多個品牌。所以在產品X中，它可能是紅色的，但產品Y可能是藍色的。他們是不同的產品，但它主要使用相同的代碼。那麼，這只是一個例子。我不是真的在做那個atm。 – CookieMonster

我試了你的答案，但我不認爲它的作品。沒有任何東西被渲染。請在這個旋轉中看到它。 https://ember-twiddle.com/3a6dfa56a59a4f81e5883d88c59d3459?openFiles=templates.application.hbs%2Ctemplates.components.my-component.hbs – CookieMonster

你是絕對正確的。我已經固定了我的想法，params不是一個數組（甚至認爲它有's'！）。它現在按預期工作。 – CookieMonster

Ember - 擴展{{component}}幫助器

回答

相關問題