Question

所以我试图创建一个名为'fsol-app-btn'的组件，是一个A标签链接。我做的第一件事是更改component.js中的tagName所以它在页面上正确呈现为A标记。

这是component.js：

export default Ember.Component.extend({
    classNames: ['btn', 'btn-app'],
    tagName: 'a',
    num: false,
    color: 'aqua',
    route: 'dashboard',
    mouseDown: function() {
        console.log('f'+this.get('route'));
        //this.transtionTo(this.get('route'));
        this.sendAction('action', this.get('route'));
    }
});

这是组件的template.hbs：

{{#if num}}
    <span class="badge bg-{{color}}">{{num}}</span>
{{/if}}
<i class="fa fa-{{icon}}"></i>{{title}}

现在它在html：

 {{fsol-app-btn icon='bullhorn' title='Notifications' route='index' num='3' color='yellow'}}

icon，title，color和num都可以正常使用，因此这个组件可以用于我想要的任何按钮。

但按钮的主要功能是点击并执行某些操作，在这种情况下，我希望它转到路径，例如link-to帮助器。我尝试传递{ {1}}然后route='name of route'致电mouseDown;

但是我得到了一个弃用的警告，它不起作用。

那我该怎么做？顺便说一句：我也试过this.transtionTo(this.get('route'))，在这种情况下，我有一个名为'clicked'的动作，如下定义：

this.sendAction()

但后来我得到一个错误，说我的fsol-app-btn的父组件没有动作处理程序：clicked

我尝试在我认为会抓住行动的地方制作路线，但无济于事。

有什么想法吗？

Answer 1

@locks是对的。您希望使用链接到帮助程序并指定类，使其行为类似于代码示例中的按钮。

链接到支持内联和块调用，因此您应该能够将您的徽章，文本等放在链接到帮助器中。

只需在组件的模板中添加以下内容即可。

{{#link-to route classNames="btn btn-app"}} {{#if num}} {{num}} {{/if}} {{title}} {{/link-to}}

适用的Ember Api - http://emberjs.com/api/classes/Ember.Templates.helpers.html#method_link-to

转换的Ember 2.0替代品自被弃用

1 个答案: