Mastering Ember Js - 16 defining ;creating and using models audio fixed Video Lecture | Build Web Applications: Ember.js - Web Development

hello everyone this is Mahmoud sunny of
core logical and it is tutorial video
we're gonna have a look at how to define
create and use models so up until now
we've been using strings as models and
in an epoch application does not know
how you regularly do it so let me show
you what I mean so inside of our up
don't chairs here we have an output
index root and inside the model book we
are returning a string an array of
strings so what do we want to do in this
tutorial we want to return something
that's really tangible something that
you can use like a pressing or either a
bunch of cars but in this video we're
going to tell you in person
so but before we can actually create
models and deal with them we have to use
my data and Emily that doesn't come with
my amp kit by default so you have to
download it from that ember.js website
so head over to ember james calm and
click on that bills link at the top
corner and you'll select any one of
these but in this video we're going to
go with peter and scroll down to the
section where it says and my data bills
and get one of these and download them
so i just got this one anybody coming
down there so I've included that in our
project folder so if you see here in the
lips and the data on KS and then I've
included it's right after jQuery
handlebars and ember
so after ember I just included in my
data so now we can create models so
let's create our first model which is
atom dot to present the lstart model
extent so that's how you create a model
just name your model on the namespace
which is up and then we safety s dot
modem dot extent so that what society s
is a namespace
available in my data is only available
when you included a script that we've
got on my website and then model is the
names and stir the secondary namespace
that you have to extend when you want to
create a model there's other stuff
inside of the S but you want to create a
model you have to extend the model and
then you pass it a hash in Perl script
or an object
wanna call it inside that you bastard
the properties that you want to create
for that person so in this case we'll
create a first name last name and an age
for that person so let's say first name
let's say John and their last name I'm
sorry we don't have to pass the values
here we'll do that later so the key is
the name of your one a property and the
value is she said TS dot attr stands for
attribute and then the next property is
last name we do TL start ATT R and by
default it defaults to a string so but
you can pass in a string in here or you
can pass in date and I think those are
the two types of stuff if I pass it I
think that's a third one but and I'll
show you quickly on the my website where
you can get more information as to the
types of properties you can create for a
model and then we have an age as well
okay so now we have a person model with
first name last name and an age so how
do we create people alright so there's
one way we can do it we can just say you
present what you they start store don't
know yet but will not go that route in
this video we'll use something called
fixtures so let's just try to use our
store and query all the people in there
and I just want to show you something
quickly so normally when you want to get
all the people you've created a person
model and now let's get all the people
in that person model so we'll just say
they start store don't find it so we're
finding all the people and every turning
it
and so what that will do is it go in our
store find another person returning so
now let's go in our homepage understand
see what we have so inside here when the
Refresh is what happens
Kahless we have an alert so let's say
it's just a note while loading route
undefined so if we look inside of our
network staff you see that our script
has tried to come to the server side you
go the forward slash people okay so
there is no I hope you define a road for
people but it just went ahead I'm
actually just call that but that's not
that important the important thing is
there is no end point of people this
authorities will fail either way it says
status 200 but it should fail okay so
how do we get past that when we don't
have a server side and endpoint corner
we'll use something called fixtures in
my we will quickly touch on that here
and in another video we'll see how to
actually use fix gesture
so if you want to use pictures and just
arms change your your model adapter to
the official solo say up person adapter
to say DL start this show adapter extent
I'm just probably just passing an empty
house with us so what I say is anytime
we want to query oppressing just go to
the fixtures instead of trying to call
the server side or we just don't stop
there we have to create fixtures
actually this person so they told you to
use the fixture adapter now we have to
create people pictures how do you do
that is up 10% pictures so now that
should be an array so what we're going
to do is going to pretend like this the
server side we have to create an array
people hashes resonate now we can give
it value of Jonathan last name you say
Cena and then and then an a let's take a
12 let's create one more person just pop
it is two people inside of our store
first name is John Kelly and say a do
something more because I think John
seems a bit older well alright so now we
have these people you can restore this
how this query here returned is the
final store will not go to the server
instead we've told you to use present a
duck top of picture times but now it's
going to use this picture you want to
show us person okay okay let's go back
in our browser and refresh right so now
if refresh this okay so what happened
now just kind of set property no it's
just all undefined
that's because that's because we have to
move them pictures right below the
present just below me just move this
down
cut it cut it roughly defined a pretty
good first ordering is very important
you're not a video we do have to
organize helpers right but right now
let's just stick everything in one fun
so I can go browser here is refresh they
exist the ID property must be defined on
a number it's just okay that's good I'm
getting somewhere so every fixture must
have an ID since we try to mimic what's
coming in from the server Karthik we
have to give a lease to this piece just
adjust you just use ID
of incrementing once or one or two go
back to the browser refresh okay okay
now we're we're getting somewhere
it's actually looking through our people
well you can see is actually showing us
that data type themselves instead of the
actual users inside there so let's go
ahead and print out the first and last
name on the age so this is where it's
looking through the model although all
that we're saying is between the item
one item it's not a string or a
primitive data type is actually an
option so we can't printed up them so we
must say item dot something I don't get
the properties of that object so we say
item Todd first name and then I can take
is a ten-inch
so now we'll be looking gonna see
examples Jones that this person everyone
we're gonna have to see John Cena is of
age age of John Cena English 27 so we
should see that our browser go back and
refresh so we say John Cena is of age of
seven John Kelly is of age 26 so let's
look in our ember and inspector here and
see what we have for the flow so let's
go to the data here as you can see model
type person and about records too so
this is our store yet if you want to see
what's inside your store just come to
and button select over the center stone
so we have joint Cena and then you are
drawn Kalyan and all the properties that
you've defined on it okay so that's it
guys for this is through that video it
cannot have went on a bit longer than I
expected but that's fine as long as we
understood what was happening so the
next tutorial video we're gonna have it
with the fixtures and how to define
fixtures for different models that's it
that's it guys thanks for watching and
if this was helpful please subscribe and
share and like the videos as party now
see you