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

hello everyone this is language sunny of
core logical and in this 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 ever application does not know how
you regularly do it so let me show you
what I mean
so inside of our DOJ's here we have an
output index root and inside the model
hook 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
present 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 an emulator does in concrete and
applicate by default so you have to
download it from that ember.js website
so head over to mpg-us 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 buy data builds and get one of
these and download them so I just got
this one and buddy I'm in don't care so
I've included that in our project folder
so if you see here in the lips and the
data dot yes and then I've included it's
right after jQuery handlebars and Emma
so after Emma I just included Emma data
so now we can create models so let's
create our first model it is add dot
person
the lstart model extent so that's how
you create a model you just name your
model on the namespace which is out and
then you say TS dot one dot extent so
that's what society as a namespace
available in my data just only available
when you've included a script that we've
got from the my website and then model
is the names is the the secondary main
space that you have to extend when you
want to create a model but there's other
stuff inside of des but if you want to
create a model you have to extend the
model and then you pass it a hash in
JavaScript or an object
shall we want to call it and inside that
you pass on 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 then last
name oh sorry we don't have to pass the
values here we'll do that later so the
key is the name of your model property
and the value is you said TS dot attr
stands for attribute and then the next
property is last name we do the lstart
attr and by default it defaults to a
string so but you can pass in a string
in here or you can pass in date
I think those are the two types of stuff
you got passing I think I said turn one
but 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 present model with first
name last name and an age so how do we
create people all right so there's one
way we can do it we can just say new
person what you they start store don't
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
if they start store don't find so we're
finding all the people and every turning
it
I'm sorry what that would do is it got
you know install find a person returning
so now let's go in our home page and
just see what we have so inside here
when you refresh let's see what happens
okay unless we have an error so let's
say it says error while loading route
undefined so if we look in side of our
network's tab we will see that our
script has tried to call to the server
side using the forward slash people okay
so there is no help to define a route
for people but it just went ahead and
actually just call that but that's not
the important thing an important thing
is we there is no endpoint of people so
this 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 endpoint cord so use
something called fixtures in ember we
will quickly touch on that here and in
another video we'll see how to actually
use fixtures so if you want to use
fixtures you just change your your model
adapter to use this your server say app
person adapter
question Sadie asked dot
fisheye adapter
extent
I'm just passing an empty house so what
I say is anytime we want to query a
person just go to the fixtures instead
of trying to call the server side but we
just don't stop there we have to create
fixtures actually for this person so we
told you to is the fixture adapter now
we have to create people pictures how we
do that is after present fixtures so now
that should be an array so what it's got
going to do it is going to pretend like
it's the server side so we have to
create an array people hashes so we just
feel resonate now we can give it value
of John and the last name say sealer and
then an a let's take 12 let's create one
more person it's companies you will have
two people inside of our store first
name is John Kelly
and I say age 26 changes to something
more mature because I think John Cena's
have been older 12 okay all right so now
we have these people in our store
now this query here we turn this door
final store will not go to the server
instead we've told you to use a person a
laptop of the fixture type now it's
going to use this feature here to show
us person okay let's go back in our
browser and refresh time so now I'm
refresh this okay so what happened now
just kind of set property features are
undefined that's because we have to move
them pictures right below the person so
let me just move this down cut it after
define the people first so ordering is
very important you're not a video will
do how to organize your project properly
but right now let's just stick
everything in one fun so back in a
browser here refresh okay says the ID
property must be defined on a number of
a shrimper fixtures okay that's good
getting somewhere so every fixture must
have an ID since we try to mimic what's
coming in from the server we have to
give IDs to these fixtures so just use
IDs of incrementing one so one or two go
back in a browser refresh okay now we're
we're getting somewhere
it's actually looping through our people
but as you can see it's actually showing
us that data types themselves instead of
the attributes inside there so let's go
ahead and print out the first and last
name under age so this is where it's
looping through the model so all that
we're saying is print the item for item
it's not a string or a primitive data
type is actually an object so we can't
print an object so we must say item dot
something get the properties of that
object so we say item Todd first name
and then
is off stage then we can do here I 10.8
so now when we look we're gonna see
examples John's practice first name
wrong we're gonna have to see John Cena
it's not age and the age of John Cena is
27 so we should see that on our browser
let's go back and refresh okay so we see
John Cena is on a 27 John Kelly is of
age 26
so let's look in our ember Specter here
and see what we have so let's go to the
data tab here so 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 by inspector on the sector stone so
we have John Cena and then we have John
Kelly and all the properties that you
define all here okay so that's it guys
what is true that video it gone on a
went on a bit longer than I expected but
that's fine so as long as we understood
what was happening so in the next
tutorial video we're gonna have a look
at fixtures actually and how to define
fixtures for different models and all
that stuff okay so that's it guys thanks
for watching and if this was helpful
please subscribe and share and like the
videos so thanks for watching I'll see
you soon bye