[MUSIC]

So we've completed the implementation of the, sort of,

adding document functionality.

And now we need to make it possible for

the user to actually access those documents as and when they please.

Cuz obviously, as they've added a bunch of documents, we now need to show them all

the documents that are in the database that they can access.

So what we're gonna do is just start by adding a list of

documents to the navigation bar so they can quickly jump in.

And later in the course,

I think we're gonna come up with a more elaborate design for that.

But we'll start with just a simple dropdown list.

So the first thing is to add some stuff to the navigation bar template.

And I'm gonna sort of see if I can put my dropdown list in there.

So I think it can just become

part of this other navigation list because we've already got a navigation list for

dot adding a document so we'll jut add the list of documents as another

element to that, and I'm gonna use some Bootstrap Boilerplate code for that.

So I'll show you where I'm gonna get it from.

If I just go to the Bootstrap components page here,

then we can see we've got, I'm going to navbar down there.

There's a nice kind of dropdown feature here which I like and

I'm gonna grab the Boilerplate code for

that dropdown instead of sort of having a dropdown that looks like that,

I'm gonna have a drop-down list of documents so let's see how we can do that.

So, I'm gonna look for that code in here and just grab it, there it is.

Dropdown, and I get down to the second list okay, right.

So I'm just gonna pop that in to the template there.

Let's put some comments in before we do it.

Drop down list and drop down list.

So before I post it in,

I've got some place holder marker things in there, right.

So I just tab that in, and then, so this, if you like, is just another list.

You've got a list element there, which is your add document, and

you got another list element here, which is gonna be a dropdown list.

And so let's just lay it out a bit nicer, and so

the first thing is this dropdown thing here.

So I'm just gonna space that out a bit so it's nicer to look at.

I don't want it to say dropdown, I want it to say documents.

And we can leave that there, and then

I've got the list which is gonna actually be dynamically generated from data.

So we just put doc1 there for now which is to see if it works.

And I go back over to my application folder to run that application.

Back into the app which is over here, reload and now I've got,

you see a lot of drop down on my navigation there.

Okay, so I've added the HTML code to give you a basic dropdown and

the next step is to sort of place some content into there, right?

And so

we need a template helper which is gonna pass the template a list of documents.

So what I'll do is I'll say,

each of documents.

So documents will pull on the template helper, and

end of each, and this is just gonna be the title of the document.

Title, like that.

Next, I need to specify this helper function on the navbar template,

so it can access that data, so I should have some stuff about the navbar here.

Oh, no helpers yet, so I've got some events for the navbar,

but no helpers, so I just jump here and put it here, and

template.navbar.helpers and it's called documents,

and what it does is pass back all documents for now.

Doc groups, return documents.find with an empty

filter search in return all of the documents.

All right, let's see if that works.

Okay, so there's currently one document in there.

So if I hit that button.

Whoops, it says I'm not logged in.

So let's login quickly, test.

Create the account.

So I need to just quickly create an account, and

then, I should now have the ability to add documents.

So you see, every time if I tap that add document button, so I did it four times,

so now you see all those documents have appeared down here.

So, that's great.

But the next step is when I click on an element in that list,

I want to be able to load that document into the editor.

So we already implemented the code whereby

every time we create a new document it automatically loads into the editor.

Well I now want to,

sort of load a document when I want to based on what I click on in that list.

So we go back into the template and we set the class on the link so

Ref here class =" js-load-doc".

Then I need to specify that even in the template helper.

Sorry, the template events.

So I've already got some events here for that nav bar and

it's called click and click on js load doc.

Okay, so when they click on something with the class of js load doc,

do this, basically, event

and I should be able to, from the context of this, so in an event.

So we've dealt with sort of stand alone events that don't really need to know what

was clicked on particularly in terms of like list of things so

I'll just show you if I print out and so log this.

You'll see that in this variable I've got access to,

to the context data context that this event occurred in.

So the data context is basically, it's gonna be a document because

there's my iteration through the documents, so it's gonna go through and

each time that link gets generated, it's accessing a document object, right?

So the data context is a document, therefore,

I expect this when I print out this to look like some sort of document object.

So let's just see, how that looks, so when I click on this,

it should print out something that looks something like a document and

that's what we expect, we expect it to have an ID, a created on field, an owner,

and a title, as you can see.

That's what we would see if we looked at the documents in the Mongo database.

So it's basically the raw data that represents a document.

So what I want to do is actually take this ID field and use it to load a document.

It's quite simple, because we're using that reaction section stuff,

just grab this code from up here and instead of res, it's gonna be this._id.

So it basically takes the ID of the document that you clicked on and

uses it to update the session,

which should trigger a sort of reactive response to that in the Meteor.

And then basically it'll re-render the editor with the new document.

Fingers crossed.

Okay, so let's just see.

So I'm gonna write some code in there so we can see,

doc1, okay, and then doc2 and then doc3, right?

So I've just put some code in so we know if we're loading it.

So you see that?

When I load doc1 I get the doc1 code, doc 2,

I've got the doc 2 code, doc 3, I've got the doc 3 code.

Okay, so you can see it's kind of loading the different documents,

depending which one I click on.

[MUSIC]

Document list

Web Application Development with JavaScript and MongoDB

Meet the Instructors