Mastering Ember Js - 22 Dealing with form events Video Lecture | Build Web Applications: Ember.js - Web Development

hello everyone this is lemon Sonny of
Cola logical and this tutorial video
we're going to have a look at how to
deal with form events okay we're gonna
create a basic phone and then just see
how we can handle that submit event
about that form so here we are in our
index dot sorry up dot J as well and
we'll just I just created a simple
controller called index controller and
it's an object controller I mean this
video doesn't really matter you can make
it an array controller or just a simple
controller all right so we'll go in our
index dot HTML inside the index template
I'll just create a simple form there and
the form will have inside of it protein
which is of type submit' and inside here
i'll just put submit okay and we'll have
another input there but this time we
would use the native HTML input we'll
use handlebars input helper and we just
find this value of the form to first
name now controller even though we
haven't created first name property in
the controller it will automatically be
created by M okay so we want to create
an action here that when this form is
submitted that I'm my automatically pops
up a message just showing us the name
that we've found here in this first in
this valley so let's create something
called action and we'll say handle
submit
I know some of you may be screaming that
this is wrong but that's the point I
want to make so inside here the
controller will have to have an actual
touch and we'd have to create that
function to handle it inside of our
handlebars we did something called an to
submit so we'll have to create one as
well here and that's a function and its
idea will do a lot I was saying the
first name is and we just do the plus
sign they start kept press name
okay so just recap hundred submit action
we need an S here on inside handlebars
form here we did an action to point to
that function inside our controller so
let's go in our browser and refresh this
so when i refresh as you can see even
without submitting the form if I click
on this input field here that will pop
up on that alert and say this first name
is undefined and the reason for that is
by default when you just do action and
you specify the action name the default
action that ember tends to capture is
the click Handler and when you click
anywhere inside the form it bubbles up
to the parent form here and then it
catches it if you want to specify that
when the form is submitted you have to
do the actual name then you do on the
call to submit so if I do this is the
modifier here that's now it would only
it won't listen for any click events it
would listen to on the submit event okay
so let's go up in our browser and
refresh and now when I click this input
field here nothing happens until when I
submit the phone so I'll just say lemon
which is my name and I'll click on
submit and as you can see it says the
first name is lemon likewise for when I
click inside the text box and I click
the enter key on my keyboard you're not
seeing that but it just pops up the
alert box as well so and
click on the submit day about submitting
the form so that's it guys for this
tutorial video and if you have any
questions just post them down in the
comments below and if this was useful or
helpful in any way please do comment and
subscribe to my channel and I'll see you
in another video thanks for watching bye
bye