Question

我正在尝试创建一个FontAwesome把手助手，它也可以为html输出添加一个动作。

把手助手将color和action作为可选参数：

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);
});

以下是我如何使用它：

{{icon 'angle-right' action='expand'}}

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

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

但它不起作用......当我点击图标时，没有记录任何内容。 Handlebars助手不可能以这种方式输出Handlebars代码吗？是否有另一种向html输出元素添加动作的方法？

Answer 1

这样的地方就是你想要使用组件而不是Handlebars助手的地方。（车把助手的能力非常有限。）

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

这将在单击图标时调用控制器中的expand操作。

将操作名称传递给应该在帮助器输出中的Handlebars帮助程序

1 个答案: