使用HTMLBars

Question

我试图绑定静态类＆＃39;表单控件＆＃39;和动态的属性值＆＃39; color＆＃39;但是，对于输入助手的class属性，我使用的语法只是将它输出到渲染的DOM元素

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

没有实际绑定＆＃39; color＆＃39;的值到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"}}

注意＆＃34; form-control＆＃34;的结尾处的空格。 class，这是必需的，因为concat帮助器暂时不添加任何分隔符。

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

应用/助手/加入-params.js

import Ember from 'ember';

export function joinParams(params) {
  return params.join(' ');
}

export default Ember.HTMLBars.makeBoundHelper(joinParams);

然后使用它而不在＃34; form-control＆＃34;的最后添加空格。类

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