Ember JS將值傳遞給包含HTML的組件屬性

Question

我有一個非常簡單的表單字段組件，該組件顯示帶有標簽的輸入。 組件/form-field-input.hbs

<label>{{label}}</label>
{{input value=value type=type }}

template.hbs

{{form-field-input label="Which of our products do you like the most?" type='Text' value=favouriteProduct}}

假設我希望標簽中的產品一詞鏈接到我的應用中的另一條路線，該路線列出了所有產品。 有什么辦法可以做到這一點？

我知道以下內容無法正常工作，因為這些字符只會被轉義。 是否可以通過某種方式在父模板的JS文件中構建標簽並傳遞標簽？

{{form-field-input label="Which of our {{#link-to 'products'}}products{{/link-to}} do you like the most?" type='Text' value=favouriteProduct}}

Answer 1

您可以考慮安裝ember-cli-showdown

ember install ember-cli-showdown

我你的component.hbs文件

<label>{{markdown-to-html label}}</label>
{{input value=value type=type }}

使用該組件時，您可以直接放置常規HTML，並將其完全呈現。

{{form-field-input label="Which of our <a href='/products'>products</a> do you like the most?" type='Text' value=favouriteProduct }}

希望對您有所幫助。

Answer 2

使用組件塊，我們可以解決上述問題。

// hbs
{{#if hasBlock}}
    <label>{{yield}}</label>
{{else}} 
    <label>{{label}}</label>
{{/if}}
{{input value=value type=type }}

// using in template --  if need custom markup
{{#form-field-input type='Text' value=favouriteProduct}}
     {{#link-to 'products'}}products{{/link-to}} 
{{/form-field-input}} label="Which of our products do you like the most?"

// using in template --  if custom markup not needed
{{form-field-input label="Which of our products do you like the most?" type='Text' value=favouriteProduct}}