使用 HTMLBar 绑定静态和动态类答案

【问题标题】：Binding static and dynamic classes with HTMLBars使用 HTMLBar 绑定静态和动态类
【发布时间】：2015-09-15 02:34:00
【问题描述】：

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

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

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

我正在使用的语法：

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

【问题讨论】：

标签： javascript ember.js handlebars.js htmlbars

【解决方案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 助手来为您处理：

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"}}

【讨论】：