javascript - 使用 HTMLBars 绑定(bind)静态和动态类

Question

我正在尝试将静态类“form-control”和动态属性值“color”绑定(bind)到输入助手的类属性，但是，我使用的语法只是将其输出到呈现的 DOM 元素

class="form-control {{color}}" 

实际上没有将“颜色”的值绑定(bind)到类属性。我知道这是用 HTMLBars 在普通 DOM 元素中绑定(bind)静态和动态类的方法，但是对于使用大括号的元素是否有不同的语法？

我使用的语法:

{{input class="form-control {{color}}" value=property.value type="text"}}

Answer 1

双花括号语法调用 Handlebars 中的助手或路径。但是在帮助程序中，您不能使用它们来调用子表达式。相反，您必须使用括号来调用子表达式。例如:

错

{{input value={{uppercase user.name}} }}

正确

{{input value=(uppercase user.name) }}

因为 handlebars 不允许用动态值插入文字值。您需要使用一些自定义助手来实现您想要的。 Ember 1.3.2 带有一个 concat 助手，所以你可以像这样使用它:

{{input class=(concat "form-control " color) value=property.value type="text"}}

注意“form-control”类末尾的空格，这是必需的，因为 concat 助手此时不添加任何分隔符。

如果您使用的是旧版本，您可以创建一个join-params 助手来为您处理这个问题:

app/helpers/join-params.js

import Ember from 'ember';

export function joinParams(params) {
  return params.join(' ');
}

export default Ember.HTMLBars.makeBoundHelper(joinParams);

然后使用它而不在“form-control”类的末尾附加空格

{{input class=(join-params "form-control" color) value=property.value type="text"}}