使用HTMLBars绑定静态和动态类

Question

我正在尝试将静态类'form-control'和动态属性值'color'绑定到输入助手的class属性,但是,我正在使用的语法只将它输出到呈现的DOM元素

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

没有实际将'color'的值绑定到class属性.我知道这是用HTMLBars绑定普通DOM元素中的静态和动态类的方法,但对于使用花括号的元素有不同的语法吗？

我正在使用的语法:

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

Answer 1

双花括号语法在手柄中调用辅助或路径.但是从帮助器中你不能使用它们来调用子表达式.相反,您必须使用括号来调用子表达式.例如:

错误

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

正确

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

因为把手不允许用动态值插入文字值.您需要使用一些自定义帮助程序来实现您的目标.Ember 1.3.2附带一个concat帮手,所以你可以像这样使用它:

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

注意"form-control"类末尾的空格,这是必需的,因为concat帮助程序暂时不添加任何分隔符.

如果您使用的是旧版本,则可以创建一个join-params帮助程序来为您处理:

应用程序/佣工/加盟,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"}}