All language subtitles for 1. Reusable modal

Hi there, welcome back here in the previous lecture, we have this played the rest of the exchange

of data they have displayed, they use their username and also avatar.

Let's continue this lecture and let's take a look at the opportunity future.

OK, so let's start here in our exchange detail page, and what we want to implement is benefit of click

here, make a deal.

This will open the model window, which you'll be able to present as good a deal for the user so we

can adjust the price and also some information so we can send the opportunity to the to the creator

of this exchange before we get into that.

I will give you more explanations of this.

I would like to create a reusable model functionality because they will have multiple models in their

applications.

They already have a profile model and also these make a deal that will be a model component.

So got a profile of the model.

And first, let's try to rework these models so we can make it reusable.

OK, I'll show you what I mean by that.

Go to your code or go to your profile model components.

Let's find her components.

And the profile model of our profile model here, you can see that the model we are controlling from

within of the profile model component, so we are controlling the model is open, we are controlling

Model X closed and so on.

So now when I would like to, but I want to create a new model of the model component, I need to.

Start from scratch and need to again create up around the model is open functionality and so on and

so on.

But I don't want to repeat that.

I would like to make it reusable.

So what they'll do, they'll go to other components, Everclear and your components, so let's create

a new file, let's call it simply model view, and this will be a reasonable model.

Will do it like this?

First, let's create a template.

And we'll enter into the template, the copy paste of parts from the profile model of be considered

as very usable.

Go to your profile model and actually copy the interactive here from here.

OK, so go from down here to the app and copy the interactive.

Got their motherlode view, and let's paste everything here and make sure everything is indented correctly.

Now from a model, the view.

Let's repeal the parts of which we consider to be not reusable.

So, for example, here in this section, it very have a forum.

This forum is only related to the profile functional activity, which will because they are updating

here the profile, but that's the only part of it, don't really need to form in the model.

We will get it here dynamically.

You will see how so you can you can target the entire forum instead of the model.

You can just simply remove it and leave it empty.

And here is a whole other.

Their.

Here is a model with our body.

A year in a bartender is also just profile model related functionality to update profiles, so for now,

I'll just simply keep it empty.

And here is a profile that's not really is our profile here.

Next up, because that's what a lot of viewers thought is will be should be reusable for every, every

component.

So let's fly here for now.

Update today to our update the day data update or just update, our update adds up to your update for

them.

Whatever you want to have there.

OK, so have the idea for the data, OK, we can still improve it.

We'll decide later.

So that's after this will be a reusable model that you will be using.

Also in other components, as you can see, how we are using here is open.

So please.

But I just scraped a radio script and let's define this data because otherwise it will not work so that

we can remove.

OK.

Default.

Just to export default.

OK, and let me find here data and a data legislator in the is open and market to the falls just for

now, so we will see that it works.

So that's a sizable part of the model.

And I will show you how we can connect this with your profile model.

Go to your profile model.

And as you can see here, from here, we can go the other way around.

We can just leave here a forum that can just completely remove the model so we can get rid of this section

here, Steve.

All right.

Just leave here and just leave here.

Form nothing more.

All right.

So just remove all of this, as you can see, I will only only grow not only form nothing else here.

OK.

Just like this.

Of course, this will introduce a couple of issues that he will say we'd like these and evil to go to

your brain, but I was able to see the form is displayed and it's not inside of the models, so.

That's not great, so what, Bill do?

We will drop our model component.

Well, they have created around out of form here.

First down here in port model.

Import model from from the components model and then divide it into the components so they can use it

in our template model.

And actually, that's quite a model, but let's call it exchange model or up model like this.

OK, so actually are calling that component exchange.

So that's the exchange model, OK, exchange model and now will go up here to your template.

And what value exchange model?

Like this and wrap it inside your forearm instead of the exchange model, OK, so now don't buy the

closing bracket yet, but go under the forum and close it here and like this.

OK, so now your exchange model is wrapping around the forum.

OK, so let's save it.

Go back.

You can see now your model is displayed.

The when we opened up the data, we are opening the model, you can see that model is getting open,

but there is no forum.

OK, because of course, when you click on the update info now, update info will open this this model

here and you can see this model is completely empty.

OK.

That's what you see here.

You're opening this model now.

Updated data.

Is this model here?

What do you want to display here?

Instead, they'll be the model body, which will be dynamic depending on the content which will the

model will receive.

OK, so to think you about us start CPR or they want to do OK, I'll show you.

Is that they have a now currently two components, right, they have a model.

Model and model is wrapping are a profile model actually profile model like this profile model?

Profile model has a model inside of its templates, a profile model is the.

He's basically the brother around the model.

So the to the profile model they can provide are form templates, so they can provide a form template

and the model will be responsible or responsible to render this form template.

OK.

So we could use props, though, actually not in this case, but what they can do here are we can evaluate

something called slot like this to the value slot, and this is very interesting because now it will

work.

You will see if any of you will produce slot, you'll save it will go back to here, you will refresh.

Or actually you could see the already.

You will have their quick update in for your your model.

So what basically happened in your profile model?

Here you are passing your forum inside of the extension model and whatever is passed through the brackets

here to the opening and closing bracket of the extension model is replace is placed into the slot.

So this slot is replaced basically if you imagine it by the entry form.

OK, you are passing it to exchange models.

So this entry form is getting into the slot, so that's why you can display it now.

Of course, a couple of things.

A lot work still because save changes button we haven't didn't hook up with the new model, so and I

will update the data.

This will not work yet.

No big deal because these will be fixing in in the next lecture.

So guys, I hope everything is clear at this point.

If something, as always, you can just divide me in the Q&A section, we will end up the lecture here

and will continue in the next one two years.