Question

我有一个非常简单的表单字段组件，它显示带有标签的输入。的部件/表单字段-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}}

Ember JS将值传递给包含HTML的组件属性

2 个答案: