Mastering Ember Js - 18 Ember computed properties Video Lecture | Build Web Applications: Ember.js - Web Development

hello everyone this is laments and of
khadija and in this video we're gonna
have a look at how to create computer
properties so what are computer
properties in my Jas let's actually try
to edit by a use case for computer
properties let's have a look at our
after j s we have an index controller
and it has two properties first name and
last name
I say we want to create that one other
property that depends on first name and
last name what do I mean by that they
say you have an input field that you can
change the first name and another input
field and you can change the last name
so you want to behavior aware in anytime
that you change the first name the full
name actually adjust to changing the
first name and when you change the last
name as well the full name changes so
before we get into to an explanation
let's go ahead and actually start
programming this so we can understand
what's going on
so inside our index template here let's
delete this because we're not gonna use
it here so we have a peacock for the
first name so let's say first name so
we're buying into a person a and another
one
so we'll have an input field just right
next to it and we'll buy the value to
first name now let's have another line
here that today's last name and we'll
find the value of the next input field
to investment
so now in our browser and refresh this
is what we get so we have Angelina so we
will change that the one on the left us
will also change and saying for Jolie
then we type started there so let's go
back and create one more right just P
and that's the full name so we'll create
a property called full name also create
that in our controller first it doesn't
yet exist so now it is full name we want
to bind to first last name so we're
going to create a property called full
name that's going to be a function and
inside there will return a star checked
first name I will say + space string
please don't get last name
but this will not work as expected this
rectified his return you are ok but this
won't work as expected like as it what I
mean they start this full name will not
get out of automatically updated and if
you want it to update any time for some
box name change we have to do something
like property but I know this is weird
but this is something that Empire does
for us so this is an extension of the
function prototype as some property
function to that so we can do something
like this other thing in pure JavaScript
you can do that but it rest number so
you pass in all your dependencies so in
this case first name and last name so
what this is doing is that we're saying
this also depends on first and last name
so if any of these change we will
recalculate this function useful name
here so this is cached on the first time
you created so full name the value will
be first name last name concatenated so
anytime this is changed that cash is
refreshed this function this will run
again
back in our browser let's refresh I just
can see Angelina Jolie are the third
line when I change these those Angelina
Jolie you know so we change as well so
let's just say it Jodie and as you can
see bolonia computed property is
automatically adjusting to the policy
likewise for years well that's it guys
for this Tula video I just wanted to
make it short I hope that clears your
understanding or what computed property
is and in another video we'll have a
look at what observable what are
observers in images because when I was
talking out those two differences
between them and when to use which one
strips me up a bit so I'll see you soon
in another video thanks for watching and
if this was helpful please rate and
subscribe and I'll see you soon bye bye