Hello everyone and welcome back.
In this lesson we're going to learn how to let out of your application listen for dorm events and then
we can then use to three different methods defined in the application itself while doing so.
We're going to introduce the V on the inactive.
Let's get started.
Here we are in business to your code.
As you can see I've created a new folder for this lesson.
We have a new age demo file and a new genius file.
I've also opened up the file in the browser by copying its path.
And one thing that we still need to do is to include in our HDMI file.
Of course a link to views CBN in the previous lecture we use the latest version linked this one and
this time we can use these that link instead which will also provide us some useful error messages in
the console.
You can however check all the different bills available to find the best version for the project that
you're currently working on.
And of course if you're in production mode remember to use them unified version of the file.
So I'm now going to just copy this link yeah like so we can now start the development process.
We said that the first thing that we need to do is to create a new view instance which is the root of
far of your application.
We can define a variable var application equals new view and to the view function we pass an object
the options object and inside the options object we can define all sorts of different properties.
The first one that we need to define is L which stands for element and l expects a CSX selector reference
in the H the AML element where do want to Mount Airy instance on.
So in this case we can use an I.D. output.
And therefore we need to define an element we can use a dealer and inside this if we need to define
a d Yep.
We've also said that inside the options object.
Another very important property is the data object and inside these details object we can define different
properties to use within our application for example to show a value in our HDMI page.
We can for example define lesson here to give us the string events and methods and we can now use the
value that is associated with lesson with text interpolation.
So inside the diva I can for example define in each one HDMI tag and you say I can use that mustache
syntax to interpolate the text.
So going back to what page refresh and entities let's start talking about the new concepts for this
lesson.
My defining first of all the counter variable which can initialize with zero.
And of course we can now show the value maybe and say then h three tag something like counter
make so and if we refresh the page of course we get our counter let's say do we not wanted to increment
the value of counter by pressing an h the MLP button and yeah we can write increments plus plus so if
you've got any proficiency with JavaScript and of course you do considering that you're watching an
intermediate advanced level course you know that in JavaScript you can perform a different actions when
different events occur.
And considering that view is a javascript framework we can use a detective if you did active V on it
to listen for these dumb events in order to perform different actions.
So in this case we want as we said to increment the value of counter when button is pressed.
Therefore we can define the V on DirecTV call on.
We know that is a dome event called on Clicker yet in view we can just use click so V on call on click.
Now we need to specify what kind of action we want to perform in this case increment the counter so
counter.
Plus equals 1.
So let's refresh the page and if we now click on income in the plus plus as you can see the value goes
up you probably remember that using the V buy in the directive you can just use it.
Short version by just using that caller like so and well using V on you can just delete the column altogether
and use the ET.
So the symbol is basically a shortcut for a V on call on and we are different name.
We're going to often use it later on but for now let's just use the V on the Directive itself defined
the javascript code to execute when an event occur directly either in the H T email file is of course
not the best solution possible especially for planning and executing more than one line of code and
that's why you will most of the time want to define some methods inside your viewing instance defining
methods is pretty easy.
You can find methods property and inside the methods property of course we can define all the methods
that we want.
For example in this case we can define increment counter like so and in order to reference to one of
the variables inside the data object that we need to use this so to increment counter inside data we
can use this does counter plus equal one pretty easy of course considering that we're using a method
that we can define as much code as we want.
For example console dot log these dot counter and also if these dot counter equals ten others counter
is at 10.
We can now just use the method name to executed whenever the increment plus plus pattern is pressed.
And notice also there is no need to actually call the method that we can just assign it to the event.
So now going back to grant again refresh a page.
Of course incremental plus plus and the counter goes up.
You see we also get the alert count counter is at 10 and when I press.
Okay.
Then he goes to 10.
And clearly if you know check the development console we also see that all the different values of count
that have been logged.
You see that we can also find a message from Abuja.
Yes.
And that's because of course we are using this specific development version let's make another example
right away into defined to be are tags and yet in other diva with class equals box.
We have no way to define the properties but it's less about us who are going to listen for the mouse
over events.
So I'm using the at symbol instead of V dash on and not it's also the name of the event.
Same as on click de Dom event name is normally on mouse over yet in future.
Yes just a mouse over there so let's say that on mouse over it we want to call a method which are going
to define of it the box.
But let's define first some CSF properties for that box classic.
So here.
Style
boxes.
And so the ground again set you with 300 pixel end height 300 pixel as well.
So let's now define out all that the box method
so over the box we could just console log over the green box.
So let's now go back to the browser.
Once again like so let's refresh our page and it is of course our green box so we can now over the box
with the mouse you see we're calling the mantle because we get of a green box two three four five and
so on.
So no data in here.
Let's also check how to use the debugging tools provided by the extension did we've been installed.
You see it's detecting Abuja yes on this page of course.
We can now open the dev tools by clicking here and then view and you see that.
We have a route for instance and clicking on it.
We also get access to the data object and of course we can inspect the data but we can also modified
for example increasing the counter and you see the value of course is getting updated on the page as
well.
OK.
So that was it for this lesson about events and methods in Abuja.
Yes.
See you in the next one.
What are we going to talk about conditional rendering.