Sessions is temporarily moving to YouTube, check out all our new videos here.

Things You Should Never Do with Ember Template Helpers

Alex Speller speaking at Ember London in February, 2017
Great talks, fired to your inbox 👌
No junk, no spam, just great talks. Unsubscribe any time.

About this talk

Some things that you can do in templates, and probably never should.


So, things you should never do with helpers. I figured I'd just show some stuff that you can do in templates and you probably never should and maybe this will help you or cause you pain one day. So, Jamie was showing some stuff with helpers, that he was doing and showing off the mut object, the mute helper, which lets you change things, basically. A mut helper... the mut helper is kind of hard to understand, but it basically...let me try and zoom in a bit here, the maximum I can. The mut helper will basically give you a kind of object that has a value and a method to update that value. I don't think...I haven't got any keyboard shortcuts. I haven't got any keyboard shortcuts at all. This is really bad. Okay. Have you remapped the Command key on here? - [Man] [inaudible]. - It just doesn't [inaudible]. So that's basically...I don't know if you can see that, it's quite small, but I can't go any bigger very easily. The mut helper will give you a value that you can use in a template, and it will give you a function that lets you update that value. And why that's useful is you can then use it in conjunction with the action helper. So, this is really common. Let's say you want to toggle something. Let's say you have a button and it's going to toggle. And if value, "Here is some stuff." So, we want this button to show some stuff on the page. Well, you know, that's kind of easy. You can have a property in your controller or component, whatever, and you can have an action in your controller or component to change that property so that you can see this stuff. But, you know, maybe I don't want to make a controller just for that one thing. And, you know, there is kind of the argument that that's kind of a template concern. You want to wrap that all up here. So we can do that just in this template. And you can do that by an onclick to the button equals mut value... Where am I going here? - [Man] [inaudible] to cause after that action. Oh, thank you. There we go. And then value true. And that will show it. But you can't hide it again. So, you know, you can make a not helper. I normally install Ember truth helpers, which has a bunch of stuff. Like not helper included, but it's very easy to make a not helper, not value. So that's basically not helper, it negates what you pass in. And then we can do here not value. This is kind of starting to look pretty Lispy. Right, so going on and off. So that's kind of cool, you can do some stuff in the template there and that's a really common thing that you need to do. You kind might want to encapsulate the state by putting it in the controller room component and explicitly saying it's there, but, you know, for a really quick thing, you can actually just do this straight away in the template. So, let's try adding some kind of stateful things. So, what if we want to start counting in the template? That's just going to evaluate to nothing at the moment because it's nil, but let's add a helper that is called count. And we've got our count helper. And then outside of the context of this function, we can say that current equals zero. And then we're ignoring the params and we're going to say... Oh, this is really awkward. So, we can count in template. You should, you know, definitely not do this with helpers. What else can you do? But, I mean, maybe actually, this is...maybe, actually, you should do this with template. So, you know, let's say current equals false, current equals not current. And let's move this file. Helpers... I'm going to call it "alternate." So, true, false, true. Yeah, that seems to be working. And let's go into our CSS, and let's do td.funky. - [inaudible]. - Background color. - Magenta. - Magenta, hurray. And then in our template, let's have... Let's make a table and then let's do tr. Actually, the other should be tr, td, one. I should have kept account helper. TR. Okay, I've got copy and paste. That's like the only Command shortcut that was working here. Okay, so I've got a table. And, you know, business people, they like stripy [SP] tables. So, class equals if, alternate. That's going to be "funky." All right, we've got a stripy table. So, you know, actually, I think there might even be an add-on or one of the helper add-ons that has this helper in it already. And, you know, this kind of... I mean, I find this quite easy to read now, but when these nested helpers came out, it just kind of looked like Lisp and it is kind of hard to read. So my rule of thumb is that you should find someone who doesn't know Lisp and see if they can understand it, and if they can't understand it, you should definitely not do it. So the last thing I'm going to show really quickly is I'm going to show an object helper. So, let's do "routing." So... I just realized I'm not entirely sure of the syntax for this. Let's see if I can remember it. Compute. And let's see if that output to anything. Hurray. So you've got can have helpers that...most helpers tend to be functions. This helper is a fully fledged Ember object. Why is that useful? Well, because you can do stuff like look up stuff on the container. So what is? Is this going to even work? I can't remember how to import the getOwner API, so this is kind of old, so you should definitely not do this. Yeah, you've got to route it. So, now you can access stuff on the router. So you can do stuff like manipulate the router and see what the current route is. CurrentHandlerInfos, is it? Now set up current path, the current... Why is that not working? - It's not long enough. - Oh, right, thank you. There we go. So, yeah, you can do stuff, like, in space. Stuff on arbitrary Ember objects and put them in the template. You could do stuff like if current route is this, then show this. Generally, you should never do any of these things. That's all I've thought of. Thank you, everyone. - Thank you.