WEBVTT 00:00.090 --> 00:02.250 Hello everyone and welcome back. 00:02.280 --> 00:07.260 In this lesson we're going to learn how to let out of your application listen for dorm events and then 00:07.260 --> 00:12.780 we can then use to three different methods defined in the application itself while doing so. 00:12.780 --> 00:15.220 We're going to introduce the V on the inactive. 00:15.420 --> 00:17.010 Let's get started. 00:17.010 --> 00:18.480 Here we are in business to your code. 00:18.480 --> 00:21.480 As you can see I've created a new folder for this lesson. 00:21.480 --> 00:24.860 We have a new age demo file and a new genius file. 00:24.870 --> 00:31.050 I've also opened up the file in the browser by copying its path. 00:31.050 --> 00:35.510 And one thing that we still need to do is to include in our HDMI file. 00:35.520 --> 00:44.190 Of course a link to views CBN in the previous lecture we use the latest version linked this one and 00:44.220 --> 00:51.360 this time we can use these that link instead which will also provide us some useful error messages in 00:51.360 --> 00:52.370 the console. 00:52.380 --> 00:57.960 You can however check all the different bills available to find the best version for the project that 00:57.960 --> 00:59.310 you're currently working on. 00:59.310 --> 01:05.100 And of course if you're in production mode remember to use them unified version of the file. 01:05.550 --> 01:16.460 So I'm now going to just copy this link yeah like so we can now start the development process. 01:16.470 --> 01:22.350 We said that the first thing that we need to do is to create a new view instance which is the root of 01:22.350 --> 01:24.160 far of your application. 01:24.240 --> 01:32.400 We can define a variable var application equals new view and to the view function we pass an object 01:32.460 --> 01:38.900 the options object and inside the options object we can define all sorts of different properties. 01:38.910 --> 01:47.430 The first one that we need to define is L which stands for element and l expects a CSX selector reference 01:47.430 --> 01:51.630 in the H the AML element where do want to Mount Airy instance on. 01:51.630 --> 01:54.830 So in this case we can use an I.D. output. 01:55.320 --> 02:02.400 And therefore we need to define an element we can use a dealer and inside this if we need to define 02:02.480 --> 02:05.320 a d Yep. 02:05.430 --> 02:08.220 We've also said that inside the options object. 02:08.220 --> 02:16.020 Another very important property is the data object and inside these details object we can define different 02:16.020 --> 02:21.350 properties to use within our application for example to show a value in our HDMI page. 02:21.480 --> 02:31.970 We can for example define lesson here to give us the string events and methods and we can now use the 02:31.970 --> 02:36.380 value that is associated with lesson with text interpolation. 02:36.380 --> 02:44.980 So inside the diva I can for example define in each one HDMI tag and you say I can use that mustache 02:45.110 --> 02:48.300 syntax to interpolate the text. 02:48.320 --> 02:55.040 So going back to what page refresh and entities let's start talking about the new concepts for this 02:55.040 --> 02:55.710 lesson. 02:55.730 --> 03:01.970 My defining first of all the counter variable which can initialize with zero. 03:01.970 --> 03:10.070 And of course we can now show the value maybe and say then h three tag something like counter 03:12.930 --> 03:20.360 make so and if we refresh the page of course we get our counter let's say do we not wanted to increment 03:20.450 --> 03:29.780 the value of counter by pressing an h the MLP button and yeah we can write increments plus plus so if 03:29.780 --> 03:34.490 you've got any proficiency with JavaScript and of course you do considering that you're watching an 03:34.490 --> 03:39.920 intermediate advanced level course you know that in JavaScript you can perform a different actions when 03:39.920 --> 03:41.500 different events occur. 03:41.630 --> 03:48.320 And considering that view is a javascript framework we can use a detective if you did active V on it 03:48.500 --> 03:52.960 to listen for these dumb events in order to perform different actions. 03:52.970 --> 03:58.740 So in this case we want as we said to increment the value of counter when button is pressed. 03:58.790 --> 04:04.020 Therefore we can define the V on DirecTV call on. 04:04.100 --> 04:12.770 We know that is a dome event called on Clicker yet in view we can just use click so V on call on click. 04:12.770 --> 04:19.370 Now we need to specify what kind of action we want to perform in this case increment the counter so 04:19.370 --> 04:19.940 counter. 04:20.300 --> 04:22.860 Plus equals 1. 04:22.880 --> 04:30.680 So let's refresh the page and if we now click on income in the plus plus as you can see the value goes 04:30.680 --> 04:35.840 up you probably remember that using the V buy in the directive you can just use it. 04:35.910 --> 04:44.510 Short version by just using that caller like so and well using V on you can just delete the column altogether 04:44.690 --> 04:45.830 and use the ET. 04:45.950 --> 04:51.410 So the symbol is basically a shortcut for a V on call on and we are different name. 04:51.440 --> 04:59.010 We're going to often use it later on but for now let's just use the V on the Directive itself defined 04:59.060 --> 05:07.070 the javascript code to execute when an event occur directly either in the H T email file is of course 05:07.100 --> 05:13.400 not the best solution possible especially for planning and executing more than one line of code and 05:13.430 --> 05:19.510 that's why you will most of the time want to define some methods inside your viewing instance defining 05:19.550 --> 05:21.050 methods is pretty easy. 05:21.050 --> 05:28.820 You can find methods property and inside the methods property of course we can define all the methods 05:28.880 --> 05:29.590 that we want. 05:29.630 --> 05:37.880 For example in this case we can define increment counter like so and in order to reference to one of 05:37.880 --> 05:44.780 the variables inside the data object that we need to use this so to increment counter inside data we 05:44.780 --> 05:53.540 can use this does counter plus equal one pretty easy of course considering that we're using a method 05:53.540 --> 05:56.900 that we can define as much code as we want. 05:56.900 --> 06:11.510 For example console dot log these dot counter and also if these dot counter equals ten others counter 06:11.690 --> 06:13.930 is at 10. 06:13.940 --> 06:22.730 We can now just use the method name to executed whenever the increment plus plus pattern is pressed. 06:22.730 --> 06:28.160 And notice also there is no need to actually call the method that we can just assign it to the event. 06:28.550 --> 06:34.040 So now going back to grant again refresh a page. 06:34.100 --> 06:38.260 Of course incremental plus plus and the counter goes up. 06:38.490 --> 06:42.740 You see we also get the alert count counter is at 10 and when I press. 06:42.760 --> 06:43.480 Okay. 06:43.550 --> 06:44.640 Then he goes to 10. 06:44.750 --> 06:50.210 And clearly if you know check the development console we also see that all the different values of count 06:50.210 --> 06:51.570 that have been logged. 06:51.830 --> 06:54.430 You see that we can also find a message from Abuja. 06:54.440 --> 06:54.920 Yes. 06:55.040 --> 07:02.840 And that's because of course we are using this specific development version let's make another example 07:02.840 --> 07:12.730 right away into defined to be are tags and yet in other diva with class equals box. 07:12.750 --> 07:19.160 We have no way to define the properties but it's less about us who are going to listen for the mouse 07:19.700 --> 07:21.230 over events. 07:21.440 --> 07:27.710 So I'm using the at symbol instead of V dash on and not it's also the name of the event. 07:27.770 --> 07:33.870 Same as on click de Dom event name is normally on mouse over yet in future. 07:33.890 --> 07:39.590 Yes just a mouse over there so let's say that on mouse over it we want to call a method which are going 07:39.590 --> 07:42.320 to define of it the box. 07:42.650 --> 07:48.170 But let's define first some CSF properties for that box classic. 07:48.590 --> 07:49.970 So here. 07:50.270 --> 07:51.020 Style 07:53.940 --> 07:54.470 boxes. 07:54.940 --> 08:06.480 And so the ground again set you with 300 pixel end height 300 pixel as well. 08:06.560 --> 08:09.020 So let's now define out all that the box method 08:11.920 --> 08:23.180 so over the box we could just console log over the green box. 08:23.180 --> 08:24.830 So let's now go back to the browser. 08:24.830 --> 08:33.240 Once again like so let's refresh our page and it is of course our green box so we can now over the box 08:33.270 --> 08:40.650 with the mouse you see we're calling the mantle because we get of a green box two three four five and 08:40.650 --> 08:41.400 so on. 08:41.400 --> 08:42.480 So no data in here. 08:42.690 --> 08:47.300 Let's also check how to use the debugging tools provided by the extension did we've been installed. 08:47.310 --> 08:50.750 You see it's detecting Abuja yes on this page of course. 08:51.030 --> 08:57.880 We can now open the dev tools by clicking here and then view and you see that. 08:57.950 --> 09:01.300 We have a route for instance and clicking on it. 09:01.440 --> 09:07.470 We also get access to the data object and of course we can inspect the data but we can also modified 09:07.500 --> 09:13.380 for example increasing the counter and you see the value of course is getting updated on the page as 09:13.380 --> 09:13.670 well. 09:14.200 --> 09:14.540 OK. 09:14.570 --> 09:18.180 So that was it for this lesson about events and methods in Abuja. 09:18.180 --> 09:18.810 Yes. 09:18.810 --> 09:19.900 See you in the next one. 09:19.920 --> 09:22.080 What are we going to talk about conditional rendering.