将动作名称传递给应该在助手输出中的Handlebars助手

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

但这不起作用...当我单击该图标时，没有任何记录。 手把助手不能以这种方式输出手把代码吗？ 还有另一种向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操作。