如何将表达式和字符串的混合指定为 ember 组件的 class？

Question

我想做这样的事情

{{#my-custom-component class="some-class-name {{dynamicProperty}}" }}

但这实际上是将 some-class-name {{dynamicProperty}} 渲染为类名，而不是它所代表的值。

Answer 1

您已经在一个表达式中，所以您需要省略 {{ - 以及本例中的引号 - 因为它不是字符串。 :)

<div class='{{exampleClass}}'>message in template</div>

{{!-- vs --}}

{{#example-component class=exampleClass}}message in component{{/example-component}}

这是你的组件 'controller' 基本上：

export default Ember.Component.extend({
  tagName: 'section',
  classNames: ['class-from-component-controller'],
});

您的模板范围（同名）使用此控制器，因为它在某种程度上是 'memory'。 - 因此，您可以在控制器/或模板中使用内置的属性 'classNames' 数组。

{{#example-component class='strong-voice' classNames=exampleClass}}
    message in component
{{/example-component}}

twiddle example

Answer 2

使用 concat 助手：

{{#my-custom-component class=(concat 'some-class-name' dynamicProperty) }}

如何将表达式和字符串的混合指定为 ember 组件的 class？

How do I specify a mix of an expression and a string as a class for an ember component?

handlebars.js

ember.js