1
00:00:02,400 --> 00:00:07,260
Now with that, let's go back to our app and let's make sure we can also click that order now button because

2
00:00:07,260 --> 00:00:13,500
whilst implementing this, I can also show you one other nice feature or nice approach you should be aware

3
00:00:13,500 --> 00:00:16,740
of when working with classes. In the shopping cart,

4
00:00:16,740 --> 00:00:18,460
we also got a button there right,

5
00:00:18,480 --> 00:00:23,520
we got a button which we render here. Of course I also want to make this clickable, though it won't do

6
00:00:23,520 --> 00:00:33,390
much here and to make it clickable, I'll get access to this button here, order button with cart el query

7
00:00:33,400 --> 00:00:38,040
selector for example, selecting the first and only button we find there

8
00:00:38,040 --> 00:00:45,840
and then as you're used to, you can add an event listener here and that event listener can be added to

9
00:00:45,840 --> 00:00:53,400
a click event or react upon a click event and should then execute a method. Now here I want to add a method

10
00:00:53,400 --> 00:01:00,540
which should be triggered when we click that button, order products for example and I won't add much logic

11
00:01:00,540 --> 00:01:06,450
here, just some output ordering and also I want to output this.items,

12
00:01:09,660 --> 00:01:12,040
so my cart items here,

13
00:01:12,210 --> 00:01:18,720
so this.items is what I want to output here. Now it's this order products method which should now

14
00:01:18,720 --> 00:01:22,460
be connected to the click listener and therefore here, we refer to this,

15
00:01:22,470 --> 00:01:28,230
so to the object we're working on, order products without parentheses so that that click event executes

16
00:01:28,230 --> 00:01:29,270
that for us.

17
00:01:29,310 --> 00:01:37,410
Now as you know, this in there if I click order will be undefined here or will not be our object, undefined

18
00:01:37,410 --> 00:01:40,850
here is of course actually stemming from the items I'm trying to access,

19
00:01:40,850 --> 00:01:47,130
this is not a property that exists on this because this will actually refer to the button as you can

20
00:01:47,130 --> 00:01:49,750
see if we remove .items

21
00:01:50,040 --> 00:01:50,370
right,

22
00:01:50,370 --> 00:01:51,870
this is the button.

23
00:01:51,870 --> 00:01:53,830
This is something we talked about before.

24
00:01:53,850 --> 00:02:01,170
Now I also showed you a solution of course, one solution and I'll just quickly re-add that is to use bind

25
00:02:01,170 --> 00:02:05,560
here, another solution is to here

26
00:02:05,660 --> 00:02:11,660
use an anonymous arrow function. If you do this and that's all it takes, this here

27
00:02:11,660 --> 00:02:19,290
is then the function body, then this here since arrow functions don't know this, will not be bound to what the

28
00:02:19,310 --> 00:02:22,760
event listener wants to bind it because the arrow function ignores this

29
00:02:22,760 --> 00:02:23,630
as you learned

30
00:02:23,630 --> 00:02:26,050
but instead it will keep its context

31
00:02:26,060 --> 00:02:32,290
so to say, it will refer to the exact same thing it would refer to in that code in general.

32
00:02:32,300 --> 00:02:37,810
So by wrapping it in an arrow function like this, we ensure that this works.

33
00:02:37,820 --> 00:02:42,830
The only thing we now have to do is we have to execute it here because this is now the function body

34
00:02:42,830 --> 00:02:44,150
of that arrow function,

35
00:02:44,150 --> 00:02:48,440
we could add curly braces around it and therefore this will not executed right away

36
00:02:48,440 --> 00:02:53,390
instead we pass a reference to that anonymous function which is created here on the fly to event

37
00:02:53,390 --> 00:02:58,970
listener and therefore it is anonymous function will be executed by the event listener eventually and

38
00:02:58,970 --> 00:03:03,150
the body of the function therefore then only runs when that anonymous function executes

39
00:03:03,200 --> 00:03:08,870
which is why here in the body we have to execute this so that this does execute when this outer anonymous

40
00:03:08,870 --> 00:03:09,840
function executes.

41
00:03:10,490 --> 00:03:15,150
And with that if you reload and you add something to the cart and you click order now,

42
00:03:15,170 --> 00:03:18,560
now this works and indeed we get access to our items.

43
00:03:18,560 --> 00:03:25,760
This is one possible approach, an alternative to that and let's comment this out is that you don't use

44
00:03:25,760 --> 00:03:30,850
that wrapping arrow function and therefore you get rid of the parentheses there,

45
00:03:30,860 --> 00:03:35,360
instead we use the old approach but now you set up order products differently and

46
00:03:35,360 --> 00:03:45,020
that's also something you can do. You can add it using this field syntax here because you could add a field

47
00:03:45,050 --> 00:03:50,300
named order products which then simply holds a function,

48
00:03:50,300 --> 00:03:55,670
that wouldn't change much though but how about an arrow function?

49
00:03:55,670 --> 00:03:58,560
Now we're not using the method shorthand, instead

50
00:03:58,790 --> 00:04:04,910
I'm creating a field which holds an arrow function and since arrow functions don't care about what

51
00:04:04,910 --> 00:04:11,030
you bound this to, instead they always give you this in the context it would have otherwise as well,

52
00:04:11,060 --> 00:04:17,270
this since it's inside of that class here in the end will refer to the object created by the class.

53
00:04:17,270 --> 00:04:23,120
So now with that, we also ensure that this inside of this function will always refer to the object

54
00:04:23,150 --> 00:04:27,980
created by the class and not to what it would normally refer to

55
00:04:28,070 --> 00:04:30,420
and in this case, that would be the button of course.

56
00:04:30,470 --> 00:04:35,240
The only thing we have to be careful about here though is that normally this would work but since

57
00:04:35,240 --> 00:04:37,100
render gets called in a constructor

58
00:04:37,100 --> 00:04:43,130
when you called super, it will actually be called before a property is created based on that field, right?

59
00:04:43,160 --> 00:04:44,780
That's what I explained earlier,

60
00:04:44,840 --> 00:04:51,500
the fields are translated to properties after the constructor ran. So to utilize this workaround in this concrete

61
00:04:51,500 --> 00:04:56,540
example here and it's really only because of how super works and how it calls render,

62
00:04:56,540 --> 00:05:02,720
we would have to parse false in here so that super does not call render and then set up this, not as

63
00:05:02,720 --> 00:05:09,260
a field but actually as a property with this order products equal which kind of replaces the field, just

64
00:05:09,260 --> 00:05:14,520
so it just executes such that we can thereafter call render manually.

65
00:05:14,710 --> 00:05:18,970
So again, this is just a workaround that's required for this exact use case.

66
00:05:18,970 --> 00:05:25,990
This idea of storing an arrow function in a property or normally under different circumstances also in a

67
00:05:25,990 --> 00:05:28,540
field would always work.

68
00:05:28,570 --> 00:05:35,670
So now if I reload this and I add something here, you see that works as before now using this trick.

69
00:05:35,690 --> 00:05:41,560
Now actually technically there is a difference between storing a function in a property and adding a

70
00:05:41,560 --> 00:05:46,990
method like this but that's a bit more advanced and something we'll come back to in the next module where

71
00:05:46,990 --> 00:05:49,240
we have a closer look behind the scenes of all of that.