我正在尝试将静态类“form-control”和动态属性值“color”绑定(bind)到输入助手的类属性,但是,我使用的语法只是将其输出到呈现的 DOM 元素
class="form-control {{color}}"
实际上没有将“颜色”的值绑定(bind)到类属性。我知道这是用 HTMLBars 在普通 DOM 元素中绑定(bind)静态和动态类的方法,但是对于使用大括号的元素是否有不同的语法?
我使用的语法:
{{input class="form-control {{color}}" value=property.value type="text"}}
最佳答案
双花括号语法调用 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"}}
关于javascript - 使用 HTMLBars 绑定(bind)静态和动态类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31101967/