Ember.js 将动作名称传递给应在帮助器输出中的Handlebars帮助器

我正在尝试创建一个手柄助手，它还可以向html输出中添加一个操作

车把辅助对象将

颜色

和

操作

作为可选参数：

Em.Handlebars.helper('icon', function (iconName, options) {
    var returnString = '';

    options = options.hash;

    returnString += "<i class='icon-" + Handlebars.Utils.escapeExpression(iconName) + "'";
    returnString += options.color ? " style='color: " + options.color + "'" : "";
    returnString += options.action ? " {{action '" + options.action + "'}}" : "";
    returnString += "></i>";

    return new Handlebars.SafeString(returnString);
});

控制器中的操作如下所示：

actions: {
    expand: function() {
        console.log('expanded!');
    }
}

---

但它不起作用。。。单击图标时，不会记录任何内容。车把助手不能以这种方式输出车把代码吗？有没有其他方法可以将动作添加到html输出元素？

类似于这样的情况，您可能希望使用组件而不是把手助手。（车把助手的功能非常有限。）

然后，对于您的模板：

<i {{bind-attr class='fullIconName' style=styleAttribute}}
    {{action 'iconClicked' on='click'}}>
</i>

---

单击图标后，这将在控制器中调用

展开

操作。

结果表明，该操作本来应该在父节点上。但这是一个很好的答案，我肯定会使用建议的组件。

App.FontAwesomeIconComponent = Em.Component.extend({
    color: '',
    styleAttribute: function() {
        return 'color:' + this.get('color') + ';';
    }.property('color'),

    icon: '',
    fullIconName: function() {
        return 'icon-' + this.get('icon');
    }.property('icon')
});

<i {{bind-attr class='fullIconName' style=styleAttribute}}
    {{action 'iconClicked' on='click'}}>
</i>

{{font-awesome-icon icon='angle-right' color='blue' iconClicked=expand}}