4

我正在尝试将静态类“表单控件”和动态属性值“颜色”绑定到输入助手的类属性，但是，我使用的语法只是将其输出到渲染的 DOM 元素

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

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

我正在使用的语法：

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

1 回答 1

6

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

错误的

{{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助手来为您处理这个问题：

应用程序/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"}}
于 2015-06-28T18:23:12.417 回答