- [Instructor] In this video we're going to create
our first honest to goodness view components
using views component method and get them
rendered on the page.
So here's our mock-up again.
And this is our index.html file which has nothing in it.
So we're going to create some components
for where the filter form and the list of people
are going to go.
So over here in my editor, the script file we're going
to be working with is directory.js.
I'm going to create my instance first.
We'll call this a directory and this will be a new view
just like we did before.
Here's my configuration object.
And we need to know where to place this.
We'll set that in just a second.
And we're going to add some data to it.
Well out of our chapter three data file.
This is going to be window.lmdirectory.people.
So I'll just call this people.
Like so.
Now over here in index.html I'm going to jump down to line 115
cause that's where I've set up the element
where our view is going to be rendered.
So this is called directory root, I will copy this.
Come back over.
So I'll set the element where this is all going to go.
Save this and let's confirm that view has loaded
and it's actually seeing what we've done.
Yup, it's lit up so we're good to go.
Now let's create the components.
So we're going to use view.component here.
This will define components globally for view
anywhere we're going to use them later.
You just need to make sure that these are defined
before you create any instance where
they're going to be used.
And since they're going to be used down here in our directory
I need to create them up here first.
So this function takes two arguments
the way we're going to use it.
We're going to create a directory filters component.
And we'll pass some configuration to it.
The configuration that we passed to view component
looks a lot like what we're going to pass
into any view instance.
It can have data, it can have a template, and so forth.
So we're going to set the template first.
And now we're going to be putting our first string
of HTML into a component.
So I'm going to just put in a form with just
a little bit of basic stuff here.
Call this directory filters.
And we'll put a paragraph tag in here just to
give us something to see on the page.
Insert filters here.
Close the tag.
And that should work.
We're going to need a second component as well
so I'll copy this and paste it.
This will be our directory people.
And for the template I'm going to make this even simpler.
We don't need a form tag.
Insert people here.
Okay, at this point we've defined our components
now we just need to use them.
And to do that, we'll switch over to our index.html.
Okay, and now for this I'm going to steal some markup
from the mock-up file.
So let's open up that mock-up.
I'm going to use Command + P to open any file.
I'll go to this mock-up and I'll jump down
with Control + G to line 115.
I'm going to copy out some of this boilerplate here.
And inside our directory root, I'll create a div
called company directory.
I'll paste in some of that markup from our mock-up file.
And the way this works, as you can see,
is I've used what's called kebab case
where everything is lower case
and separating words with hyphens.
Because that's sort of what web components look like.
So these will be tags.
Directory filters and they're open and close,
just like that.
So I have one for the filters, and I'm going to
have another one for the people.
And save.
All right, so to recap.
We've created two components which don't really
do anything so far except have a template
that can be rendered and I've created a view instance
where they will go.
I've added them to what effectively is the template
inside my view root, and now we can switch
to the browser and try 'em out.
So let's reload.
And we can see that things are rendering.
Let's take a look in our view tools.
Going to use Command + Option + I.
And switch to the view tab.
And here we are.
Directory filters and directory people.
Now notice that the capitalization is different here
than it is inside my source.
View will transform the names of the components
depending on usage.
So here and in the actual templates, you use kebab case.
And then if you're interfacing with these via JavaScript
the spaces will be removed and they'll be
scrunched together and capitalized.
Now again these aren't doing anything right now,
we're just proving that they render.
One final thing I want to mention is that
I'm trying to follow the view style guide wherever possible.
There are a lot of guidelines in the style guide
to help you make decisions about how to name
your components depending on usage.
Overall I find views documentation to be really
quite good, worth reading.
So this step is done.
We have our components rendering on the page
and next we'll be able to start putting
some real meaningful stuff inside our components.