用HTMLBars绑定静态和动态类

Question

我试图将静态类“窗体-控件”和动态属性值“颜色”绑定到输入助手的类属性，但是，我使用的语法只是将其输出到呈现的DOM元素

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

而不实际将'color‘的值绑定到class属性。我知道这是将普通DOM元素中的静态和动态类与HTMLBars绑定的方法，但是对于使用大括号的元素是否有不同的语法呢？

我使用的语法：

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

Answer 1

双大括号语法调用工具栏中的助手或路径。但是，在助手内部，您不能使用它们来调用子表达式。相反，您必须使用括号来调用子表达式。例如：

不对

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

对，是这样

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

因为手柄不允许用动态值插值文字值。您需要使用一些自定义助手来实现您想要的目标。EMB1.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);

然后在“窗体控制”类的末尾不加空格地使用它。

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