將動作名稱傳遞給應該在助手輸出中的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操作。