Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:7Length:44 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Multiple Vue Instances

In this lesson, you will create a second instance of Vue so that your users can click on a movie poster to retrieve more information about the associated movie.

Useful Links

2.5 Multiple Vue Instances

Now, that we got our basic search functionality down, I want to allow the users to click on any of these posters in order to see more information on the movie in question. Now, there is a lot of information available that you could view, but in this course, I just want to focus on the title of the movie. The year the movie was made and the basic plot of the movie. We're gonna pull in those three pieces of information and display them in a modal. So right now, we have this search movies function which is used using the S parameter here which is searching for any number of movies that match the key words that's being typed in. But now, we're gonna do a different type of search. We're gonna take the imdbID associated with whatever movie we click on and we're gonna display the information for that ID. That way, we know that we're getting the right information and we've already built that id into our movies here. You'll notice actually, if we go back to our JavaScript and take a look at our template, we can see that the data-id attribute is bound to the imdbID. So if I were to right click on one of these, Movie posters and click on Inspect. Then in the parent div you'll see that data-id is tied to a certain imdbID. So we're going to use that id to search for more information about that particular movie whenever we click on the movie poster. So let's talk about how to do that. We've already got this search movies function, and now I'm gonna create another function called loadMovie. So we're gonna load one particular movie instead of searching for any number of movies. So again, we're gonna call this loadMovie with the capital M and we're gonna pass in an id. And again before we do this, I'm just gonna cut that, before we do this I need to create a new copy of our code pane here. So I'm gonna click on fork to create a new copy, and then in our new copy We gonna create this function loadMovie and we gonna pass in an ID. So initially it's gonna look similar to what we did before. We gonna do an js followed by a then call so let's copy everything inside the search function and paste it here. And I'm gonna get rid of everything inside this then function here. So I'm gonna get rid of all that. And we're also gonna change the way the url is structured because right now instead of using the s parameter, we're gonna be using the i parameter which points to the imdbID, and we're gonna set it equal to the id that's passed in. So we're just gonna add the id to the end of that url in order to get the particular movie that we're searching for. And then for our then function, once we get that data, we're going to be creating a new instance of a view and we're gonna point it to this modal that we've created in our html. So we have this Bootstrap modal here with an id of movie modal. And it's this id that we're gonna be using for our new view instance. And then in this view instance, we're going to be in this modal title section here, we're gonna display the title and the year the movie was made. And then down here, in our modal body, we're going to display a plot summary. And all of this data can be pulled from the search results that we get. So I'm gonna be using the view Mustache syntax or curly bracket syntax here to point to this data. So in the modal title section in our html, I'm gonna point to the title of the movie, which in the data that we're pulling in is the ((Title)) with a capital t. And then after that ((Title)), in parentheses I'm gonna put the year the movie was made. And so inside these parentheses, I'm gonna put another set of open and closing curly brackets or double curly brackets, if you will. And I'm gonna put in the year here. And the name of that property is called ((( Year )))with a capital Y. And all of this is data that is been pull in from the OMDB API. So it’s gonna return a title, it’s gonna return a year, it’s gonna return a lot of information, but another thing it's gonna return is a property called Plot with a capital P. And again, we’re gonna put that inside the modal body and we'll put that in a paragraph. So we'll create a paragraph tag here and then our closing paragraph tag and inside that paragraph we're going to put our (( Plot)). So now that the modal is set up, let's actually make this into a view instants, so what grab the movie modal id here and in this mobile by default is invisible. Obviously, we can't see it on the stage but once we click on one of these movie titles, we're gonna trigger that modal and make it pop up. So let's jump into our JavaScript. And let's scroll up a little bit, just after our first view instance here. After that first view instance, we're gonna create another instance of view. So let's skip a couple of lines just before the searchMovies function here. And let's create a new view instance and let's call this modalApp. And we're gonna set this equal to a new instance of view. Then we need our parentheses and curly brackets. And inside this new instance we're gonna point to that element that we talked about. The container for that modal which has an id of movie-modal. And then for our data object we just need three items. We need the Title with a capital T because that's how it's passed in from the OMDB database. And we're gonna set that to an empty string. Then we have the year which is also gonna be an empty string. And then we have the plot of the movie. Now, it's important that we declare these three items here so that once we changed the value of those items and actually give them a value, it will be reactive and it automatically change whatever is in our html. If we don't declare these variables and set them equal to some initial value, then that won't always work. So that's really all we need for this new instance of view. We're not using a component with this particular instance because we've put all of our text interpolation items here inside the HTML using that moustache syntax. So we don't need a component here. All we need to do now is once we've searched for whichever movie we've clicked on, we need to set the title, the year, and the plot, by pointing to modalApp.Title, .Year, and .Plot. So let's go down to our loadMovie function here, and inside this then function. So after that data has been loaded, we're going to assign values to those three items. So again, the name of our view instance is modalApp. So I'm gonna copy that. And then, we'll come back down here into our loadMovie function, and I'm gonna paste that. We're gonna point to modalApp. Title, and set that equal to data.Title. Now, this time we don't need to point to data.Search, because this is a different type of search. We're not getting an object with a parameter called search anymore. Whenever we search this way, the OMDB database is returning an item. That has Title with a capital T as a property of it. So again, it's important to understand the structure of the data you're pulling in. Which is why it's always helpful to do a quick search and console log whatever data is being pulled in. So you can look at that data and understand how it's structured. So we have data.title and then we're gonna have modalapp.year, which is the year the movie was made. And that's gonna come in to that same data object as a property called Year, with a capital Y. And then, modalApp.Plot, which is gonna come in as data.Plot. Then, once we've pulled all of that data in, the HTML should automatically reflect that new data. All we need to do now is make that modal show up, that Bootstrap modal. And the way we do that in Bootstrap as we point to the module which is contained inside this element called moving module. So we're pointing to that in jQuery, and then in Bootstrap, in order to get that module to show up, all we need to do is say dot module. Open and close parentheses and then inside quotation marks we type in the word show and then a semicolon at the end of our statement. So let's save our changes here and click on Run and We should see everything refresh. And now let's see if this works, and actually it won't work yet because we haven't created our click event yet. We've created this loadMovie function, but we haven't called this loadMovie function. And so to create that click event, we're actually gonna do this in our HTML. And we're gonna do it on this particular item here, on the images that are gonna be loaded into this movie. And so remember, this movie's element that we created is gonna be replaced by the template that we created in our JavaScript. And if we scroll up, Until we find that template here, this HTML here. We need to add a click event for this containing div so that when we click on that div, it's going to load our movie. And so what we need to do for this movies component that we've created, after we create our template I'm gonna put a comma after that template and go to the next line. We're going to Pull another property here called the methods. And this methods property is an object that contains any number of methods or functions that we might want to use. So I'm gonna create a function here called loadDetails, and it's gonna be a function, so we're gonna say : function. And then we're gonna pass the id into this loadDetails method. And so when this method is triggered, when this loadDetails method is triggered all we're gonna do is point to this loadMovie function that we already created. So again, inside this loadDetails method I'm gonna call the loadMovie function and pass into it the same id that's being passed into this loadDetails function, and that should take care of triggering the modal. But now we need to create a click event that's going to trigger this method, and the way we do that Is inside this div after our data-id binding, but still inside this opening div element. I'm gonna type space, and then the shortcut for doing a click event using view is @click equals, and then inside quotation marks, we're gonna type in the name of the method that we want to run. And that method is called loadDetails. And we're gonna pass into it the imdbID that is tied to that item. And so remember, we get to that by typing movieresult.imdbID. So we'll copy that. Paste it into the parentheses for that loadDetails method. And so that will pass the imdbID into this method. Which will then called our loadMovie function and passing that same value. So let's see if this works now. Let's save our file and then click on one of our titles. Actually first you need to click on Run, again, and then once that refreshes, we'll click on one of the movies And sure enough, we see that data pulled in successfully. And then we can read our title, our year, and then our plot summary. So thank you for watching and I'll see you in the next lesson.

Back to the top