Ember 2.x Ember 2.x

Exercise 9 Solution

Check out a free preview of the full Ember 2.x course:
The "Exercise 9 Solution" Lesson is part of the full, Ember 2.x course featured in this preview video. Here's what you'd learn in this lesson:

Mike walks through the solution to Exercise 9.

Get Unlimited Access Now

Transcript from the "Exercise 9 Solution" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Mike North: I'm just gonna go through the process of making a custom handle bars helper per usual strength with ember-cli.
>> Mike North: So it's gonna generate helper itself and the unit test for the helper. Then I'm gonna go into the github-repo.hps and here instead of just the count itself, I'm gonna do nice-number.

[00:00:40]
>> Mike North: And let's switch to something useful here. This does not have anything over 1,000.
>> Speaker 2: [INAUDIBLE]
>> Mike North: Yeah? All right, well we got.
>> Speaker 2: [INAUDIBLE] 2500 [INAUDIBLE].
>> Mike North: Ember-cli itself. All right, so watch that number. That makes it easy. And we will go to the console just so we can see any errors, and we're off.

[00:01:11] By default helpers pass straight through, right? Whatever value you pass in will get spit out, and that's why we're seeing no change. And this is typical of ember like when you generate a new route, the template basically it will be a no op. And that's a good starting point cuz at least it works and at least you can put it in place and it's a good sort of TDD starting point.

[00:01:40] So I'm gonna actually TDD this, nice-number-test. So we're passing in the number 42, I know that I need to pass in an array, and we are going to switch to the tests. And pick the right module, and forget about JSHint cuz we all know how to fix that.

[00:02:06] There it is. It works, fantastic, but I'm not excited yet. So I want to make sure that the result here is in fact 42. A number less than 1,000. And it works a number less than 1,000 is in fact 42. And I know that I want a number greater than 1,000 and I actually don't need result, I think that's overkill.

[00:02:48]
>> Mike North: I'm deliberately picking something that we need to, a rounding solution and not a truncation solution here, so this I want to be 4.2K. And it looks like we have a little bit of a problem. Actually maybe they changed this so I don't need the brackets here.
>> Mike North: Perfect, all right so I'm looking for 4.2K.

[00:03:16] I see 4199 so we're getting passed through for the case that we wanna do something interesting on. So I'm gonna go back to nice-number. I'm gonna add just like two more test cases. So in the case where I pass nothing at all, I want an empty string.
>> Mike North: A-ha, I don't want undefined render screen so we have to make sure we handle that.

[00:03:52] And we'll leave it there, and typically you might wanna see like what happens when you pass a string to it or true or false but keeping it simple, so time to fill in the helper. So I'm going to first, actually I do need those arrays.
>> Mike North: Const num is another destructuring with an array instead of an object.

[00:04:26] And something's weird, oops. So, let's see what's going on.
>> Mike North: Prems is undefined, so this is our first test running, and it's causing a problem. So I'm actually gonna do ifpremsreturn and empty string, we'll start there. So that will get our first test passing. And now we've got 42 coming in, and so num will be destructured appropriately.

[00:05:28] And we can do if.
>> Mike North: And we'll do something special. Otherwise.
>> Mike North: String just for fun.
>> Mike North: All right, so now we should get 4199, that's the interesting case, and is in fact num. So we're ready to go. And in this case, I'll just do a little math and I'll say we're going to take the number.

[00:06:12]
>> Mike North: So we want like num.
>> Mike North: Something like that.
>> Mike North: That's it and if we go back to our app.
>> Mike North: There we go, pretty easy. So the take away here is these are super easy to test. They're the thing to reach for for formatting things, for pluralizing, and singularizing, and capitalizing and whatever.

[00:07:09] When dealing with a DOM element, a component is the better tool, when dealing with something complex, the component is the better tool. And the last thing I wanted to show you was the idea of sub-expressions.
>> Mike North: I want to show you a different way of using handle bars.

[00:07:32] You can do something like this. So you can use, oops. All right, that's actually not valid. You can use a handlebars helper inside another handlebars helper. So if we wanted to pass a nice number to a button label or something like that, you can use what are called handlebars sub expressions.

[00:08:01] And I don't actually have a good example here to work with because we've been sort of passing entire objects around. We don't have a nice little label that we can pass through, but it's definitely worth learning and taking a look at. And there are a couple of Ember add-ons like Ember truth helpers, which give you a lot more control for conditional control flow structures.

[00:08:27] It really enriches your ability to do more in the template if you feel like you're being forced to create a whole slew of computer properties just for the purpose of negating a boolean. Or comparing two values and returning that they're equal. That's very generic stuff that's nice to keep out of your app and just to bring it as an add on.

[00:08:53] So that is it and our tests are passing. So I will commit this and then we will get into Ember data. And I'm gonna opt for instead of asking people to give a shot at switching from jQuery get to Ember data, I'm just gonna walk through it from the start.

[00:09:15] Because it is a little bit of a longer process than this and we're getting towards the end of the day. So this will be one to just sort of sit back and watch and maybe follow along as I go through it.