WEBVTT 1 00:00:01.510 --> 00:00:03.190 Welcome back 2 00:00:03.190 --> 00:00:05.880 and let's now implement the architecture 3 00:00:05.880 --> 00:00:08.563 that we just discussed in the previous lecture. 4 00:00:10.280 --> 00:00:14.090 And so, let's start by implementing that App class 5 00:00:14.090 --> 00:00:16.560 that I just showed you previously. 6 00:00:16.560 --> 00:00:19.650 And actually, I also have this architecture diagram 7 00:00:19.650 --> 00:00:23.223 right here, and it is this one called part one. 8 00:00:24.450 --> 00:00:26.540 And so as you see, this is exactly 9 00:00:26.540 --> 00:00:29.030 what we just discussed before. 10 00:00:29.030 --> 00:00:32.420 And so I will now go ahead and start to implement 11 00:00:32.420 --> 00:00:35.053 this class here and all of these methods. 12 00:00:36.400 --> 00:00:37.233 All right. 13 00:00:39.410 --> 00:00:41.893 So class App, 14 00:00:43.960 --> 00:00:46.380 and then we need the constructor, 15 00:00:46.380 --> 00:00:48.623 which for now I'm gonna leave empty here. 16 00:00:50.770 --> 00:00:52.663 Then we need getPosition, 17 00:00:57.950 --> 00:00:59.620 Next we need loadMap, 18 00:01:02.390 --> 00:01:04.923 let's take a look at what's next here. 19 00:01:06.060 --> 00:01:08.980 Then we have showForm toggleElevationField, 20 00:01:08.980 --> 00:01:10.230 and newWorkout. 21 00:01:14.560 --> 00:01:16.493 So, showForm, 22 00:01:20.646 --> 00:01:23.913 toggleElevationField, 23 00:01:27.660 --> 00:01:29.980 and finally newWorkout, okay. 24 00:01:34.310 --> 00:01:36.580 And so now, we have this structure 25 00:01:36.580 --> 00:01:39.453 where we can put our code that we already have. 26 00:01:40.430 --> 00:01:42.750 So let's start with this one here. 27 00:01:42.750 --> 00:01:47.010 So getting the user's current position using geolocation 28 00:01:49.120 --> 00:01:51.993 and so I'm gonna start by taking all of this code here. 29 00:01:53.810 --> 00:01:56.993 So, it ends here I believe. 30 00:01:58.870 --> 00:02:01.520 Yap, that's the one, cut it 31 00:02:01.520 --> 00:02:04.113 and put it here into getPosition. 32 00:02:06.800 --> 00:02:10.640 But now I actually want to refactor this a little bit better 33 00:02:10.640 --> 00:02:13.160 because I think it's still a bit messy 34 00:02:13.160 --> 00:02:15.470 to have this callback function here 35 00:02:15.470 --> 00:02:20.243 off to get current position function right here, okay. 36 00:02:21.830 --> 00:02:25.290 And so this function here, so this callback 37 00:02:25.290 --> 00:02:29.430 of getCurrentPosition is gonna become the loadMap. 38 00:02:30.380 --> 00:02:34.860 Okay, because that is exactly what we do here in function. 39 00:02:34.860 --> 00:02:36.140 So let's cut this here 40 00:02:37.200 --> 00:02:39.483 and put it here in loadMap 41 00:02:41.800 --> 00:02:44.350 and actually of course we don't need this function keyword 42 00:02:44.350 --> 00:02:48.993 here because we already called it a loadMap, right? 43 00:02:49.980 --> 00:02:52.770 So let's just copy the parameter name here 44 00:02:53.990 --> 00:02:57.763 and put it here and then get rid of these. 45 00:02:59.830 --> 00:03:01.010 Okay. 46 00:03:01.010 --> 00:03:04.150 And so now here as the first callback function, 47 00:03:04.150 --> 00:03:08.100 which is the one for success, so actually here, 48 00:03:08.100 --> 00:03:09.690 we need to call loadMap. 49 00:03:10.580 --> 00:03:12.853 And so since we're now in a class, 50 00:03:13.870 --> 00:03:16.180 we need to say this.loadMap. 51 00:03:20.100 --> 00:03:22.360 And so in JavaScript, we'll then call 52 00:03:22.360 --> 00:03:24.550 this callback function here and pass 53 00:03:24.550 --> 00:03:28.730 in the position argument, as soon as the current position 54 00:03:28.730 --> 00:03:32.510 of the user is determined, all right? 55 00:03:32.510 --> 00:03:34.800 And so that event that I just mentioned 56 00:03:34.800 --> 00:03:37.700 is basically this receive position. 57 00:03:37.700 --> 00:03:41.110 And as I said, it is not an event in the common sense 58 00:03:41.110 --> 00:03:42.550 that we used before. 59 00:03:42.550 --> 00:03:46.170 So one that we hand using addEventListener, 60 00:03:46.170 --> 00:03:48.853 but we can still think of this as an event. 61 00:03:49.750 --> 00:03:53.320 All right, and so basically on that event, 62 00:03:53.320 --> 00:03:56.473 the, this.loadMap method is called. 63 00:03:58.650 --> 00:04:01.120 Now, here we have some other code, 64 00:04:01.120 --> 00:04:03.830 So to event list notice, but for now, 65 00:04:03.830 --> 00:04:07.270 let's actually make this code here work 66 00:04:07.270 --> 00:04:11.010 because right now of course, none of this will do anything 67 00:04:11.010 --> 00:04:13.490 to our application, will it? 68 00:04:13.490 --> 00:04:15.510 And why is that? 69 00:04:15.510 --> 00:04:18.010 Well, it is because first of all, 70 00:04:18.010 --> 00:04:23.010 we need to create an actual object out of this class, okay? 71 00:04:23.290 --> 00:04:26.000 So right now this is all just a plan. 72 00:04:26.000 --> 00:04:28.130 So like the blueprint of a house, 73 00:04:28.130 --> 00:04:30.950 but it is not the actual house yet 74 00:04:30.950 --> 00:04:34.980 and so that analogy is sometimes very helpful. 75 00:04:34.980 --> 00:04:38.200 So in this case, this is just a theoretical plan 76 00:04:38.200 --> 00:04:42.410 or for application, but it's not a real object yet. 77 00:04:42.410 --> 00:04:44.453 And so let's create that down here. 78 00:04:46.140 --> 00:04:49.920 And so I will again call this app, but lowercase. 79 00:04:49.920 --> 00:04:54.770 And so this app will be new App like this 80 00:04:55.880 --> 00:04:59.820 and this application actually does need any arguments. 81 00:04:59.820 --> 00:05:01.520 And so here in the constructor 82 00:05:01.520 --> 00:05:06.130 we don't have any parameters in this method, okay. 83 00:05:06.130 --> 00:05:08.930 Because right now we don't need any inputs 84 00:05:08.930 --> 00:05:10.580 into our application. 85 00:05:10.580 --> 00:05:13.980 If we need it then, could add that here to the constructor, 86 00:05:13.980 --> 00:05:17.170 but in this case, that's just not necessary. 87 00:05:17.170 --> 00:05:19.700 One example that we could use for inputs 88 00:05:19.700 --> 00:05:22.710 in an application like this would be for example, 89 00:05:22.710 --> 00:05:24.830 an object of options, 90 00:05:24.830 --> 00:05:28.220 which is pretty common in third party libraries. 91 00:05:28.220 --> 00:05:31.280 So if we were building a library for some other people 92 00:05:31.280 --> 00:05:34.810 to use, then we could allow these developers to customize 93 00:05:34.810 --> 00:05:37.440 the library, using some options. 94 00:05:37.440 --> 00:05:42.440 But again does just not necessary in this case, all right? 95 00:05:43.300 --> 00:05:47.600 Now in order to actually trigger the geolocation API, 96 00:05:47.600 --> 00:05:50.860 this method here needs to be called, right? 97 00:05:50.860 --> 00:05:53.403 But right now dad is not happening. 98 00:05:54.340 --> 00:05:56.750 So how can we do that? 99 00:05:56.750 --> 00:05:59.620 We could do this, right? 100 00:05:59.620 --> 00:06:04.620 So app.getPosition and so then this code here 101 00:06:05.550 --> 00:06:07.870 would get executed, right at a point 102 00:06:07.870 --> 00:06:09.820 where the application loads 103 00:06:09.820 --> 00:06:13.007 and that's because as we already know all the code, 104 00:06:13.007 --> 00:06:15.690 that's here in the top level scope. 105 00:06:15.690 --> 00:06:18.210 So out here outside of any function 106 00:06:18.210 --> 00:06:21.860 will get executed immediately as the script loads, 107 00:06:21.860 --> 00:06:22.940 all right? 108 00:06:22.940 --> 00:06:24.190 And so, right in the beginning, 109 00:06:24.190 --> 00:06:27.670 this new app variable here is created out of the class. 110 00:06:27.670 --> 00:06:30.930 And then right now, immediately afterwards, 111 00:06:30.930 --> 00:06:34.020 we would get to the position of the user. 112 00:06:34.020 --> 00:06:37.180 However, why should we do this out here, 113 00:06:37.180 --> 00:06:40.520 if we could simply do it inside of the class? 114 00:06:40.520 --> 00:06:42.523 That would actually be a lot cleaner. 115 00:06:43.460 --> 00:06:46.600 So inside of the class, we also have a method 116 00:06:46.600 --> 00:06:50.200 that automatically gets called as the page loads. 117 00:06:50.200 --> 00:06:52.743 So let's think how we could do this instead. 118 00:06:53.640 --> 00:06:55.920 So inside of the App class, 119 00:06:55.920 --> 00:06:58.730 we also have a method that gets executed 120 00:06:58.730 --> 00:07:03.200 as soon as this app here is created, right? 121 00:07:03.200 --> 00:07:08.060 And that is the constructor method, remember? 122 00:07:08.060 --> 00:07:11.210 So this constructor method is called immediately 123 00:07:11.210 --> 00:07:15.360 when a new object is created from this class 124 00:07:15.360 --> 00:07:17.670 and this object that is created, 125 00:07:17.670 --> 00:07:20.690 so this app object is created right in the beginning 126 00:07:20.690 --> 00:07:22.380 when the page loads down. 127 00:07:22.380 --> 00:07:25.770 So that means that the constructor is also executed 128 00:07:25.770 --> 00:07:27.890 immediately as the page loads. 129 00:07:27.890 --> 00:07:32.090 And so what we can do is to simply getPosition 130 00:07:32.090 --> 00:07:33.263 in the constructor. 131 00:07:36.631 --> 00:07:38.980 And so here, all we have to do is to change it 132 00:07:38.980 --> 00:07:42.720 to the this word, so to the current object 133 00:07:42.720 --> 00:07:44.900 and that's actually it. 134 00:07:44.900 --> 00:07:47.420 So our code should actually already be working 135 00:07:47.420 --> 00:07:49.060 at this point. 136 00:07:49.060 --> 00:07:51.560 So the current position should be determined 137 00:07:51.560 --> 00:07:55.280 here in this method and then the loadMap method 138 00:07:55.280 --> 00:07:59.730 should be called with that current position, right? 139 00:07:59.730 --> 00:08:02.270 And actually that's exactly what we also have here 140 00:08:02.270 --> 00:08:03.413 in our diagram. 141 00:08:04.250 --> 00:08:06.800 So you'll see the load page events will trigger 142 00:08:06.800 --> 00:08:10.420 the constructor, which will then trigger getPosition. 143 00:08:10.420 --> 00:08:12.860 And then as soon as we receive the position, 144 00:08:12.860 --> 00:08:17.450 the loadMap method is called with the position, okay? 145 00:08:17.450 --> 00:08:19.493 And so let's see if that actually works. 146 00:08:20.550 --> 00:08:22.563 So here in our version, 147 00:08:23.420 --> 00:08:25.543 and let's just reload it to manually here, 148 00:08:27.210 --> 00:08:31.820 and here we go, so here is our map again. 149 00:08:31.820 --> 00:08:35.723 So our first part of the refactoring is already working. 150 00:08:36.840 --> 00:08:38.290 So that's great, 151 00:08:38.290 --> 00:08:40.760 but now let's go back to our code here 152 00:08:40.760 --> 00:08:43.733 because we still have some things to fix here. 153 00:08:45.600 --> 00:08:50.600 So remember that right here in the loadMap function, 154 00:08:50.660 --> 00:08:54.050 we have this global variable here called map. 155 00:08:54.050 --> 00:08:55.740 I mean, we don't have here, 156 00:08:55.740 --> 00:08:59.720 we are simply redefining it because it is defined up here 157 00:08:59.720 --> 00:09:01.210 in the global scope. 158 00:09:01.210 --> 00:09:04.300 But now, remember that we actually want everything 159 00:09:04.300 --> 00:09:07.070 that is related to our application. 160 00:09:07.070 --> 00:09:10.463 And that includes the map right in this App class. 161 00:09:11.305 --> 00:09:13.730 And so therefore we're now gonna define the map 162 00:09:13.730 --> 00:09:17.920 and map event as properties of the object. 163 00:09:17.920 --> 00:09:22.370 And for that, let's actually use a private class field. 164 00:09:22.370 --> 00:09:26.470 So remember that works like this and so map, 165 00:09:26.470 --> 00:09:29.020 and now we will not set it to anything. 166 00:09:29.020 --> 00:09:32.773 So just like this, and then the same for the mapEvent. 167 00:09:35.900 --> 00:09:40.350 So both of them will now become private instance properties. 168 00:09:40.350 --> 00:09:42.600 So properties that are gonna be present 169 00:09:42.600 --> 00:09:46.073 on all the instances created through this class. 170 00:09:47.820 --> 00:09:50.950 Now let's keep them here for now, in order to not break 171 00:09:50.950 --> 00:09:52.970 the rest of the application, 172 00:09:52.970 --> 00:09:57.760 but now we need to fix of course, the rest of this code. 173 00:09:57.760 --> 00:09:59.970 So at least this load map method, 174 00:09:59.970 --> 00:10:03.210 because that one relies on map and so therefore 175 00:10:03.210 --> 00:10:05.780 we need to start using it now. 176 00:10:05.780 --> 00:10:09.973 So here we now need to actually use this.map, 177 00:10:11.520 --> 00:10:15.610 because again, this is now like a property that is defined 178 00:10:15.610 --> 00:10:17.340 on the object itself, 179 00:10:17.340 --> 00:10:20.870 it's no longer just a normal variable, right? 180 00:10:20.870 --> 00:10:25.070 And then here the same, this.map 181 00:10:25.070 --> 00:10:29.920 and here also this.map 182 00:10:29.920 --> 00:10:33.350 and then here we need to define the mapEvent. 183 00:10:33.350 --> 00:10:37.903 And so this one, we also called this.#mapEvent. 184 00:10:39.800 --> 00:10:41.493 Now here, this is just wrong, 185 00:10:42.350 --> 00:10:47.350 so let's fix that and all right, that's actually it, 186 00:10:48.010 --> 00:10:51.100 but actually this will not yet work, 187 00:10:51.100 --> 00:10:54.363 but let me show you the error before I actually fix it. 188 00:10:55.620 --> 00:10:58.873 So let's go back here and reload this page again, 189 00:10:59.820 --> 00:11:02.070 and now it should not work. 190 00:11:02.070 --> 00:11:06.633 And so indeed we get, Cannot set property #map of undefined. 191 00:11:07.550 --> 00:11:12.490 So on line 38, so that's right here. 192 00:11:12.490 --> 00:11:16.050 And so if the error message says that we cannot set map 193 00:11:16.050 --> 00:11:17.490 on the this keyword. 194 00:11:17.490 --> 00:11:19.460 It means that something must be wrong 195 00:11:19.460 --> 00:11:22.023 with the this keyword, right? 196 00:11:22.960 --> 00:11:27.360 So let's use our friend console.log to take a look at it 197 00:11:28.370 --> 00:11:31.343 and indeed it is undefined here. 198 00:11:32.920 --> 00:11:34.783 So, why is that? 199 00:11:36.070 --> 00:11:39.800 Well, this loadMap method is actually called 200 00:11:39.800 --> 00:11:42.800 by function here, right? 201 00:11:42.800 --> 00:11:46.880 So that's right here and in fact this is actually treated 202 00:11:46.880 --> 00:11:51.210 as a regular function call, not as a method call. 203 00:11:51.210 --> 00:11:54.140 So again, since this is a callback function, 204 00:11:54.140 --> 00:11:56.390 we are not calling it ourselves. 205 00:11:56.390 --> 00:11:59.430 It is to getCurrentPosition function that we'll call 206 00:11:59.430 --> 00:12:01.890 this callback function once that it gets 207 00:12:01.890 --> 00:12:04.280 the current position of the user. 208 00:12:04.280 --> 00:12:08.370 And when it calls this method, so this function here, 209 00:12:08.370 --> 00:12:11.500 then it does so, as a regular function call. 210 00:12:11.500 --> 00:12:14.760 And as we learned before in a regular function call, 211 00:12:14.760 --> 00:12:18.020 the this keyword is set to undefined. 212 00:12:18.020 --> 00:12:21.973 And so that's why in here that this keyword is undefined. 213 00:12:23.010 --> 00:12:26.480 But fortunately for us, there is a good solution 214 00:12:26.480 --> 00:12:28.640 that we already know about. 215 00:12:28.640 --> 00:12:32.530 And that solution is to manually bind the this keyword 216 00:12:32.530 --> 00:12:34.450 to whatever we need. 217 00:12:34.450 --> 00:12:36.923 And in this case, that is simply this. 218 00:12:38.200 --> 00:12:41.793 So right here, this points to the current object. 219 00:12:42.770 --> 00:12:43.603 All right? 220 00:12:43.603 --> 00:12:45.340 And so that's exactly the this keyword 221 00:12:45.340 --> 00:12:48.700 that we also want inside of loadMap. 222 00:12:48.700 --> 00:12:53.700 And so here we explicitly say that, okay? 223 00:12:53.820 --> 00:12:57.890 And remember that binds will simply return a new function 224 00:12:57.890 --> 00:13:01.240 and so all of this here is still a function that JavaScript 225 00:13:01.240 --> 00:13:03.963 can then call whenever it needs to. 226 00:13:05.440 --> 00:13:09.936 So that should now work and so if we go back here, 227 00:13:09.936 --> 00:13:14.290 then our maps should still work as it should. 228 00:13:14.290 --> 00:13:17.633 And indeed, now we get the this keyword here. 229 00:13:18.830 --> 00:13:21.780 So we have the map and we have the mapEvent 230 00:13:21.780 --> 00:13:26.023 and we already see that or map is this big object here 231 00:13:26.023 --> 00:13:29.110 that is coming from the leaflet library. 232 00:13:29.110 --> 00:13:29.943 Now, all right. 233 00:13:30.860 --> 00:13:33.550 So that was the most important thing 234 00:13:33.550 --> 00:13:36.680 and the biggest thing we had to refactor, 235 00:13:36.680 --> 00:13:40.850 but now let's quickly also talk about these two event 236 00:13:40.850 --> 00:13:42.773 listeners that we have down here. 237 00:13:43.860 --> 00:13:48.550 So the one listening for the event of submitting the form 238 00:13:48.550 --> 00:13:52.213 and to one of toggling the input type field. 239 00:13:54.200 --> 00:13:58.383 So basically that's this event here and this one, okay? 240 00:14:00.640 --> 00:14:03.720 So where do you think these event listeners 241 00:14:03.720 --> 00:14:05.700 should be located? 242 00:14:05.700 --> 00:14:08.230 Do you think that they should be outside here? 243 00:14:08.230 --> 00:14:09.763 So outside of the class. 244 00:14:10.680 --> 00:14:14.320 Well, that doesn't make a lot of sense, does it? 245 00:14:14.320 --> 00:14:17.830 So instead, just like before we actually want 246 00:14:17.830 --> 00:14:20.880 these event listeners, of course, to be set 247 00:14:20.880 --> 00:14:24.520 right at the beginning, so when a script first loads, 248 00:14:24.520 --> 00:14:29.023 but again, of course, that should be inside of the class. 249 00:14:29.900 --> 00:14:33.430 And so what is the method that automatically gets called 250 00:14:33.430 --> 00:14:35.680 as soon as the script loads? 251 00:14:35.680 --> 00:14:37.350 At least in this case. 252 00:14:37.350 --> 00:14:40.690 Well, again, it is the constructor. 253 00:14:40.690 --> 00:14:43.450 And so, we are gonna attach or event listeners 254 00:14:43.450 --> 00:14:47.083 to the dumb elements right here in the constructor. 255 00:14:50.160 --> 00:14:54.130 So, of course now we want to, again refactor this code 256 00:14:54.130 --> 00:14:57.053 a little bit more and take this function here, 257 00:14:58.010 --> 00:15:02.650 out of here to basically create its own function 258 00:15:02.650 --> 00:15:03.633 with this code. 259 00:15:04.780 --> 00:15:07.953 So that's all of this I believe, yeah. 260 00:15:10.390 --> 00:15:12.653 And so where should that go? 261 00:15:13.630 --> 00:15:16.940 Well, it should go here into newWorkout, 262 00:15:19.900 --> 00:15:23.660 because submitting the form for the newWorkout 263 00:15:23.660 --> 00:15:26.216 will of course create a new workout 264 00:15:26.216 --> 00:15:29.107 and so that's what this method here is all about. 265 00:15:30.750 --> 00:15:33.500 But then here, we also need the event 266 00:15:34.930 --> 00:15:36.180 so we can preventDefault. 267 00:15:37.107 --> 00:15:41.270 And then here again, we have the map event and the map, 268 00:15:41.270 --> 00:15:43.033 so we need the this keyword, 269 00:15:45.590 --> 00:15:48.640 or actually here we are just logging it to the console. 270 00:15:48.640 --> 00:15:50.343 So there's no need for this one, 271 00:15:51.700 --> 00:15:56.700 but here we need this.map like this, all right? 272 00:15:58.520 --> 00:16:02.100 But now, well, let's actually analyze 273 00:16:02.100 --> 00:16:03.350 what's gonna happen here. 274 00:16:04.500 --> 00:16:09.370 So first of all, of course, here we need to replace this one 275 00:16:09.370 --> 00:16:13.010 and actually call the newWorkout method 276 00:16:13.860 --> 00:16:18.653 and actually not call it, but just passing it in, right? 277 00:16:19.710 --> 00:16:23.960 Now, keep in mind that this method here is basically 278 00:16:23.960 --> 00:16:26.170 an event handler function. 279 00:16:26.170 --> 00:16:28.600 So it's a function that's gonna be called 280 00:16:28.600 --> 00:16:31.110 by an event listener. 281 00:16:31.110 --> 00:16:34.300 Now, do you remember what the this keyword looks like 282 00:16:34.300 --> 00:16:37.420 inside of an event listener function 283 00:16:37.420 --> 00:16:39.243 or of an event handler function? 284 00:16:40.240 --> 00:16:44.993 Well, just to make it really clear, let's take a look at it. 285 00:16:47.330 --> 00:16:51.473 So let's log the this keyword, now right? 286 00:16:55.250 --> 00:16:58.240 So again, we need to wait for the map to load 287 00:16:58.240 --> 00:17:01.110 and now as I click somewhere, then you see, 288 00:17:01.110 --> 00:17:02.773 we get some error here. 289 00:17:03.800 --> 00:17:08.043 So that's on line 60 cannot write private member map event. 290 00:17:09.330 --> 00:17:13.830 Okay, so let's go to line 60 and see what happens there. 291 00:17:13.830 --> 00:17:17.450 And so that's right here in this event handler function 292 00:17:17.450 --> 00:17:21.940 of the event listener on clicking on the map. 293 00:17:21.940 --> 00:17:25.230 So remember this is basically the add event listener 294 00:17:25.230 --> 00:17:27.853 equivalent from the leaflet library. 295 00:17:28.870 --> 00:17:31.670 So we need to fix this next, but for now, 296 00:17:31.670 --> 00:17:33.973 let's go back to the newWorkout method 297 00:17:33.973 --> 00:17:37.600 that we were working on and so I was trying to take a look 298 00:17:37.600 --> 00:17:39.850 at the this keyword here, 299 00:17:39.850 --> 00:17:42.880 but apparently that's not possible for now, 300 00:17:42.880 --> 00:17:44.600 so let's just remove it here 301 00:17:44.600 --> 00:17:47.223 and I will just tell you the solution. 302 00:17:48.060 --> 00:17:49.490 So I was asking you, 303 00:17:49.490 --> 00:17:52.380 what do you think the this keyword will be like 304 00:17:52.380 --> 00:17:55.780 in this method now, because this is an event handler 305 00:17:55.780 --> 00:17:58.750 function and so an event handler function 306 00:17:58.750 --> 00:18:02.170 will always have the this keyword of the dumb element 307 00:18:02.170 --> 00:18:04.800 onto which it is attached. 308 00:18:04.800 --> 00:18:08.580 And so in this case, that's gonna be the form Element. 309 00:18:08.580 --> 00:18:11.457 So again, inside of this method here, 310 00:18:11.457 --> 00:18:15.030 the this keyword is gonna point to Form 311 00:18:15.030 --> 00:18:18.140 and no longer to the App object. 312 00:18:18.140 --> 00:18:21.973 And so once again, we need to fix that using bind, 313 00:18:26.427 --> 00:18:27.610 all right? 314 00:18:27.610 --> 00:18:31.110 And this is actually a real pain point of working 315 00:18:31.110 --> 00:18:35.570 with event handlers in classes like we are doing right now. 316 00:18:35.570 --> 00:18:38.130 So even when you're working in the real world 317 00:18:38.130 --> 00:18:41.070 and you have event listeners inside of a class, 318 00:18:41.070 --> 00:18:44.090 you will be binding the this keywords all the time 319 00:18:44.090 --> 00:18:46.830 because otherwise many parts of your code 320 00:18:46.830 --> 00:18:48.810 are not gonna work. 321 00:18:48.810 --> 00:18:51.130 So again, in this case, because right 322 00:18:51.130 --> 00:18:53.750 in this method call, here did this keyword 323 00:18:53.750 --> 00:18:55.770 will simply point to the Form, 324 00:18:55.770 --> 00:18:58.310 but that's just not where we want. 325 00:18:58.310 --> 00:19:01.200 In most of these methods, we want this keyword 326 00:19:01.200 --> 00:19:04.550 to still point to the object itself. 327 00:19:04.550 --> 00:19:06.650 So in this case, the app object, 328 00:19:06.650 --> 00:19:10.830 which is what this is currently pointing to. 329 00:19:10.830 --> 00:19:14.490 And so here again, we will need to use the bind keyword 330 00:19:14.490 --> 00:19:18.370 and so this should now work, all right? 331 00:19:18.370 --> 00:19:21.270 Then we also have this one here to refactor, 332 00:19:21.270 --> 00:19:24.150 but actually there is another method 333 00:19:24.150 --> 00:19:28.690 that we want to implement, which is showForm, right? 334 00:19:28.690 --> 00:19:33.080 And so showForm is basically this code right here. 335 00:19:33.080 --> 00:19:34.883 So let's just cut it from here. 336 00:19:37.980 --> 00:19:41.150 then paste that here, all right? 337 00:19:41.150 --> 00:19:45.207 Now we of course also need this parameter here, now okay. 338 00:19:47.460 --> 00:19:52.033 And then here we will call this.showForm, 339 00:19:54.880 --> 00:19:57.530 but now if we run this code, then we will actually 340 00:19:57.530 --> 00:20:00.980 get the same error that we already saw the last time 341 00:20:00.980 --> 00:20:02.983 that we inspected our code. 342 00:20:04.800 --> 00:20:07.600 So the error that we saw previously, when I clicked 343 00:20:07.600 --> 00:20:10.823 on the map, and so that's gonna be this one. 344 00:20:11.700 --> 00:20:15.520 And so it says, again, that we cannot write this mapEvent 345 00:20:15.520 --> 00:20:20.482 property onto this object that we are trying to currently. 346 00:20:20.482 --> 00:20:22.180 And so once again, the reason for that 347 00:20:22.180 --> 00:20:26.070 is a incorrectly set this keyword. 348 00:20:26.070 --> 00:20:29.680 So again, this method here is right now being used 349 00:20:29.680 --> 00:20:33.400 as an event handler function right here. 350 00:20:33.400 --> 00:20:35.910 And so just like in regular JavaScript, 351 00:20:35.910 --> 00:20:40.360 the this keyword in this function here will then be set 352 00:20:40.360 --> 00:20:44.390 to the object onto which the event handler is attached. 353 00:20:44.390 --> 00:20:49.260 And so that's gonna be simply the map itself, okay. 354 00:20:49.260 --> 00:20:51.833 And so here we are trying to write mapEvent on the map. 355 00:20:54.390 --> 00:20:57.320 So again, the this keyword points to the map 356 00:20:57.320 --> 00:21:00.713 because this is where we attached the event handler on. 357 00:21:01.840 --> 00:21:05.050 And so once again, the solution to that is 358 00:21:05.050 --> 00:21:08.750 to bind the this keywords because the this keyword 359 00:21:08.750 --> 00:21:11.900 is the App object and so then here, 360 00:21:11.900 --> 00:21:14.070 this will also be the App object. 361 00:21:14.070 --> 00:21:17.513 And of course that's where we have the mapEvent property, 362 00:21:18.670 --> 00:21:19.583 so right here. 363 00:21:21.040 --> 00:21:21.873 Correct. 364 00:21:23.460 --> 00:21:25.650 So with that fixed it should now work 365 00:21:26.850 --> 00:21:29.630 and yeah, it does. 366 00:21:29.630 --> 00:21:33.660 And so now we can also test the refactoring of the Form 367 00:21:33.660 --> 00:21:34.990 that we just had before 368 00:21:36.470 --> 00:21:40.070 and indeed we get an error, but that's not problem 369 00:21:40.070 --> 00:21:43.420 that is completely normal when we are refactoring. 370 00:21:43.420 --> 00:21:47.853 So I'm sure we just forgot like a this keyword on line 78. 371 00:21:49.550 --> 00:21:54.530 So 78, yep that's correct. 372 00:21:54.530 --> 00:21:59.530 So here, of course we need this.mapEvent like this, 373 00:22:02.450 --> 00:22:04.890 let's give it another safe and another 374 00:22:04.890 --> 00:22:08.623 try and to then, we're actually almost done with this video. 375 00:22:10.570 --> 00:22:13.610 So, beautiful, now it works 376 00:22:13.610 --> 00:22:17.420 and now all we need to do is to refactor this last piece 377 00:22:17.420 --> 00:22:21.140 of code that we have in a constructor, because of course, 378 00:22:21.140 --> 00:22:24.430 we also don't want this function here 379 00:22:24.430 --> 00:22:26.700 to be right here in the constructor. 380 00:22:26.700 --> 00:22:29.780 So basically every small piece of functionality 381 00:22:29.780 --> 00:22:31.400 that is in our application, 382 00:22:31.400 --> 00:22:33.563 we now want to be its own function. 383 00:22:34.540 --> 00:22:37.420 So let's take this and for that, 384 00:22:37.420 --> 00:22:42.080 we have the toggleElevationField method, all right? 385 00:22:44.050 --> 00:22:46.680 Now this one here actually does not use 386 00:22:46.680 --> 00:22:48.530 the this keyword anywhere 387 00:22:48.530 --> 00:22:50.210 and so here, it doesn't matter 388 00:22:50.210 --> 00:22:52.920 what the this keyword will be like. 389 00:22:52.920 --> 00:22:56.900 And so therefore we don't have to bind it manually here 390 00:22:56.900 --> 00:22:59.853 because as I just said, it doesn't really matter. 391 00:23:00.810 --> 00:23:05.200 ElevationField, all right. 392 00:23:05.200 --> 00:23:08.270 So now our constructor nicely simply 393 00:23:08.270 --> 00:23:10.930 gets the currentPosition and then it adds 394 00:23:10.930 --> 00:23:13.980 these two event listeners to the Form 395 00:23:13.980 --> 00:23:15.763 and the input type element. 396 00:23:16.860 --> 00:23:18.463 So that's very nice and clean, 397 00:23:19.610 --> 00:23:22.543 everything is neatly organized into these methods. 398 00:23:23.640 --> 00:23:26.380 And so I think this is a really great structure 399 00:23:26.380 --> 00:23:28.170 that we just created here. 400 00:23:28.170 --> 00:23:31.820 And now indeed, we no longer need these very ugly 401 00:23:31.820 --> 00:23:36.053 global variables that we relied on before. 402 00:23:37.010 --> 00:23:40.410 And now let's just test if this one here is working as well 403 00:23:41.290 --> 00:23:44.930 and of course it is, all right. 404 00:23:44.930 --> 00:23:49.290 So great, we successfully implemented or architecture 405 00:23:49.290 --> 00:23:51.100 at least part of it. 406 00:23:51.100 --> 00:23:54.720 And so now in the next lecture, we will actually implement 407 00:23:54.720 --> 00:23:57.500 the rest of the architecture. 408 00:23:57.500 --> 00:24:01.200 So that's gonna be these other three classes here. 409 00:24:01.200 --> 00:24:02.893 So I hope to see you there soon.