javascript – 使用HTMLBars绑定静态和动态类

2019-05-28 09:20:44 阅读：244 来源： 互联网

标签：javascript ember-js handlebars-js htmlbars

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

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

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

我正在使用的语法：

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

解决方法:

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

错误

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

正确

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

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

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

标签：javascript,ember-js,handlebars-js,htmlbars
来源： https://codeday.me/bug/20190528/1169991.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 使用HTMLBars绑定静态和动态类