1

So I am trying to make a component named 'fsol-app-btn' that is an A tag link. The first thing I did was change the tagName in the component.js So it properly renders on the page as an A tag.

Here is the 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'));
    }
});

Here is the component's template.hbs:

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

Now here it is in the html:

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

icon, title, color, and num all work and are just for styling so this one component can be used for any kind of button I want.

But the button's main functionality is to click and do something, in this case I want it to go to a route, such as a link-to helper would. I tried passing a route='name of route' and then on mouseDown call this.transtionTo(this.get('route'));

But I get a deprecated warning and it doesn't work.

So how do i do this? btw: I also tried this.sendAction() and in this case I had an action called 'clicked' defined like so:

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

But then I got an error saying that my fsol-app-btn's parent component had no action handler for: clicked

I tried making routes all over the place in locations I thought would catch the action but to no avail.

Any ideas?

locks
  • 6,537
  • 32
  • 39
pfg
  • 213
  • 2
  • 7
  • 1
    Why are you not using a `link-to`? It isn't quite clear from your question. There is a [routing service RFC](https://github.com/emberjs/rfcs/pull/95) being currently implemented that would be of use to you. – locks Jan 29 '16 at 00:27
  • you also need `transitionToRoute` when you are transitioning from a controller and not a route. – runspired Jan 29 '16 at 20:12

1 Answers1

0

@locks is right. You want to use a link-to helper and specify the classes to make it behave like a button per your code sample.

The link-to supports inline and block invocations, so you should be able to put your badge, text, etc. inside the link-to helper.

Just add something like the following in your component's template.

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

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

justinaray
  • 118
  • 10
  • The main reason is then when it renders the page I have an 'a' tag inside an 'a' tag like this: .... Also then the button's css is all off and doesnt render correctly, plus its silly to have double 'a' tag. Thats why I changed the tagName of the component to be an 'a' tag – pfg Jan 29 '16 at 14:03
  • A few options: * You could leave the tagName as the default, 'div' * You can technically set the tagName to '', but it's not well supported * Components have implicit 'click' handlers. You can implement this and invoke a closure action which is sourced from a route which has access to `transitionTo`. * There's also ember-route-action-helper that lets you call an action on an explicit route. Here again, you would then have access to the transitionTo method – justinaray Jan 29 '16 at 17:25