Mastering Ember Js - 20 Ember Model relationships Video Lecture | Build Web Applications: Ember.js - Web Development

hello everyone this is lamb in sunny of
cold logical and in today's video we're
gonna have a look at how to deal with
modern relationships in ember.js
okay so I've gone ahead and created some
boilerplate code just to get up and
running very quickly so you don't have
to watch me type everything so I'll just
quickly explain what I have made
beforehand so in our router here I've
made two routes which is a blog route
and article route okay so we're gonna
have a list of articles on the blog page
and then we can click on a single
article that takes us to the article
page okay so I've gone ahead and created
two other models an article model and a
comment model so in this video we're
gonna have a look at how to link these
two up together that is the article and
comment so let's go ahead and do that so
I've created some pictures for an
article and other fixtures for the
comment as well so as of now they aren't
linked together yet but we will do that
shortly so let's go ahead and list the
articles on our blog page first to start
with so inside of this index dot HTML
file here i have a blog template so this
is where the articles are going to live
and then we'll create another template
which is just for a single article I
will do that soon afterwards so right
now let's just time see what we have on
our blog page so here I am on the home
page
so after refreshing I have created a
link helper just to help us get quickly
to the blog page now when I click it
this is what we see so right now inside
of the the blog template there's nothing
being displayed except welcome to our
blog so let's make sure that the list of
articles gets displayed there so how do
we do that right now our blog template
has no model associated with it that's
because we have a light on embas default
route creation so we have created a blog
route but we haven't told the amber
creator we haven't created a route to
say use this model so let's go ahead and
do that right now so right below our
fixtures let's just say up
blah grout equals to M bar out that
extent so inside there we're going to
create a model hook there as usual that
should be a function and we're gonna say
they start find articles actually should
be singular and one more thing we have
to do is change the adapter to be
official adapter so we say up dot
article adapter pursue the S dot please
shut up - okay dot extent right so that
works okay so now that we have told
route to return a list of chali let's
rectify that should be returned we told
to return a list of articles so now the
blog route has a model of type array
which is a list of articles so let's go
inside of our blog here template and
actually loop over that so we will see
use the each helper and if you remember
this how you use it and inside of that
we're going to create just a say a P tag
and inside the P tag we will just list
the title of that article so if we
inspect the model for an article it has
a title and a body property so we can
just say inside of here we can say title
okay so let's go in our browser if we
don't have any errors we should see a
list of blog post with their title
showing so we have an error plus
inspector
today's type undefined is not a function
okay
ah apparently I should have referenced
the store here so that's the problem
we should have stolen this store find
okay so let's try that now
refreshing our browser yeah as you can
see the list of articles are being
populated here so now what we want to do
is create a link for each of these
article titles so that it goes to that
article page so let's do that next okay
inside of our blog template we can just
use the Ember link to handlebars helper
so let's give a bit of space here and
just say hush thank you and where do we
want to link to we want to link to a
single article so let me just point out
why we'd link to an article because we
have an article route defined here and
it's going to correspond to this URL
which is article slash article ID so
this is a dynamic segment so if it's not
very clear I just urge you to bear with
me in the next couple of videos we will
cover dynamic segments in ember but just
for now it's just a way of saying if you
reach this URL anything after it can be
dynamic so you can access that inside
your route which we'll do next
so we link to an article and then we
pass in this this means the instance of
the current article that we are looping
over so the link will have the article
title as its text and then we'll just
close in the link to helper here okay
so let's go back in our browser and we
refresh as you can see it's happening so
if you look at the underneath here just
around this section here when we hover
over each of these links you will see
slash articles and the ID of the article
but when I click to it we are taken to
an article page but since we don't have
a template defined for a single article
we will not see anything there this is
just coming in from the application
template which is shared amongst all the
sub templates so let's go ahead and
create the article template for a single
article
so let's just copy this quickly so and
then change the ID so it matches an
article so we'll just change this ID
here to article ID inside of a it will
say H to show you let's make it h3 and
we'll say title here before P and body
okay so let's go back in our browser and
then we refresh see what we have as you
can see it says first tablet and by
blogging building ambitious applications
in ember feels like a breeze so let's
look at our fixtures and for the article
with an ID of one this is the title
under body for is let's just confirm
that so inside of our fixtures we have
first time an ember and building
ambitious applications to end up feels
like a breeze let's change the URL to
two to have the idea of two and we see
if the second one will load okay so that
works but just one thing I want to bring
to your attention you remember we did
not specify which model this article
template should use and the reason why
that works is because Emma automatically
figures out when you come in through the
URL like we did changing here to the ID
- ember understands that this part since
it's dynamic it tries to map it to that
ID in the URL likewise if you have
passed in a model like we did here by
clicking over this link amber wouldn't
to cut the dynamic segment in the URL it
will just use that model as the model
for the template you're travelling to in
this case article template and if you're
as I said it first checks for that model
here and then associated with test but
if you came into that template through
the URL amber tries to map the URL to
whatever dynamic segment that you have
created here
so we didn't need to do something like
that
article route and the reason we will
need to do that is if we need to
associate a different model all we need
to do some extra functionality maybe set
up a controller with some extra data
which we don't need in this video so we
will leave it that ok all right so just
one thing since this video is about
model associations yes it's nice that we
have the list of articles but right now
the articles are not linking to any
comments so how do we link comments to
articles all right how you do that is
inside the model for an article we have
to create property called comments and
since it's a one-to-many relationship we
have to use something called DES dot has
many and inside there we can pass in
comment this is saying one article has
many comments too should be an S so
anytime we access this comments property
we will can loop over the comments of
that article and presenting likewise
inside of the comment we have to say
article a rtic le and then we say the S
dot belongs to part of my spelling guys
and then inside there we have to say
that as a comment belongs to a single
article but that's not all we have to
come inside of our fixtures as well and
specify which articles on which comment
so we have to come here and do something
like comments and it has to be an array
and the array shouldn't contain the
comments themselves or just the ID of
the comment so in this case let's just
associate this first article with the
second comment and we have to put inside
the array the ID of that comment and the
second one here let's just say
comments put in an array and I say owns
the first one just to make things
interesting I will just do it like this
maybe the third comment and that body
say ember is awesome just so it's
different from the rest and we'll say
that the second blog article owns the
first comment and the third one so
that's specified by the ID then we'll
have to come to the comments as well and
just say article for that comment is
article - yes likewise we'll do the same
for the other one as well so the third
one also belongs to article 2 but the
first one belongs to article 1 and this
one should not be an array because it's
a single article so if you just stick
with the 5 here guys' if it has if it
still has many relationship it has to be
an ID of arrays if it sub belongs to it
has to be a single ID so this is how if
we're dealing with service in future
videos this is how Emma expects the JSON
to come from the server by default you
can configure it to look different way
but by default this is how the JSON
should look like okay so now let's go
inside of our article template and
underneath there let's create a div and
this is where we're going to output the
list of comments and we'll just say a
for comments and we loop over each
comment
and then since an article has many
currents shall we say comments and let's
see what the property of the comment is
is the tech show we're gonna show the
text of the comments I will just say
text and if all words well we shall see
the comment underneath a single article
so let's go back to the whole page yeah
and then we refresh the browser you can
see your blog it seems like we have an
error see what it is undefined is not a
function okay what's this problem I'll
post a video and then try to debug this
because this videos going on for too
long okay guys after a bit of debugging
I did realize that I did some mistakes I
should have put the pictures here just
right after comment and also should have
specified that the comment adapter
should be using the fistula adapter
so coming adapter cousin TS da da da da
da text and and also inside of the has
many attributes for comments here should
have put async to truth basically that
what that's saying is automatically
light load the comments for the article
so don't like let the user go and fetch
it just fetch it off multi fist so this
will by default be a promise array and
then anytime that it loads it it will be
having the data coming in from the
comments okay so let's go in our browser
and then refresh and see what we have so
now we on the blog page yep so the
arrows have disappeared let's visit the
first one and as you can see we have the
content of the article and then
underneath these we have the comments
over here let's go to the previous one
and dig in deep into ember as you can
see we have the comment so it's not
properly formatted so they just format
that quickly just to see that they are
both on their own line I'll put them all
in their P tags here polygon darts
whichever you want to call them and then
when we refresh we should see comments
listed one after each other so we say is
Wow excited to learn em but together I
hope y'all excited to learn ember and
then the next one says and but is
awesome which I highly believe because
it is us we wouldn't be learning is
right now okay so that's it guys on this
video I keep saying guys I'm sure
there's some girls or woman as well
watching this so okay anyways yeah
that's it for this video it was slightly
long but yeah it is we started to get
into some slightly advanced stuff in
amber and videos coming along might be
longer than usual but yeah Alastair
trade-off we have to do and learning
complicated stuff okay thanks for
watching I will see you soon and
probably soon we'll start building some
application like stuff soon because
right now we're just digging into the
concepts which I believe is very
important because nobody really touches
on member concepts everyone just builds
on our bills bills which is good but we
have to understand how the inner
workings of my work process but I
promise you soon we will start building
an application tell us the interesting
part
so enough grumbling from me thanks for
watching once again people I'll see you
soon in another video bye bye