1

所以我正在尝试制作一个名为“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助手会。我尝试通过 aroute='name of route'然后mouseDown随叫随到this.transtionTo(this.get('route'))；

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

那么我该怎么做呢？顺便说一句：我也尝试过this.sendAction()，在这种情况下，我定义了一个名为“点击”的操作，如下所示：

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

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

我试着在我认为会抓住行动的地方到处走路线，但无济于事。

有任何想法吗？

4

1 回答 1

0

@locks 是对的。您想使用链接到帮助程序并指定类以使其表现得像您的代码示例中的按钮。

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

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

{{#link-to route classNames="btn btn-app"}} {{#if num}} <span class="badge bg-{{color}}">{{num}}</span> {{/if}} <i class="fa fa-{{icon}}"></i>{{title}} {{/link-to}}

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

于 2016-01-29T03:19:22.083 回答