2.4 Wrapping a jQuery Plugin

In the previous lesson, I mentioned that there are times when it just doesn't make sense to convert a jQuery plugin to a View Component. One of those times is when you don't own the code for that jQuery plugin. Like, for example, the accordion from the previous lesson, I wrote that plugin, so converting that wasn't that big of a deal and plus it was a pretty simple component. However, there is an accordion plugin for the jQuery UI Library. And if you are writing an application that uses that plugin and you want to continue using that plugin, which I can't blame you. It is well-made. Well, then what do you do if you are converting your application from jQuery to View? Well, one of the things I mentioned was you could create a wrapper around that plug-in. And you kind of get the best of both worlds because you get the declarative syntax with view but you get to use the same functionality from the jQuery plugin. And that way, you have an application that works and if you ever decide to swap that out with a third party view component for an accordion, Then you have that ability to do so. So, in this lesson, we're going to copy the accordion folder and we'll paste it in. And we will start by renaming that to wrapper. And we are going to take the markup from the Accordion jQuery file because this markup was actually inspired or not really inspired, it was pretty much ripped off of the jQuery Accordion plugin. This is the same kind of markup that you would use. You would have a div element that you would then retrieve in the document and call the accordion method. So if we are going to wrap around the jQuery UI's accordion, we want to keep the markup as close as possible. So we're going to grab at least the h3 and the div elements. We will copy those and we will paste them into the accordionview.html. And we will still leave this div element with an id of app but we'll get rid of the class here. And as far as the declarative markup is concerned, I'm fine with doing something like this, we can have our accordion element that would then contain all of the h3 and div elements, so basically just like that. So it's a lot like what would be there to begin with except that instead of using a div element we're using an accordion. And then we could also add in an id here, and let's set a value of well my accordion will be fine, so that our component would then have a div element and then the content inside of that div element is just going to be. Whatever we provided to the accordion element, so we will just use slot there. However in this case, let's go ahead and bring in the id, but id is going to be a prop for our accordion component. So in this case we'll just bind that to id. And then we can go ahead and set the accordion class here, so that should work and really as far as the markup and the template is concerned that's it. So we do need to modify our JavaScript code, now we're still going to create a component called accordion. We are still bringing in the template, our prop in this case is going to be id. We aren't working with any data, and we don't have any methods, so there's that. We don't have to worry about hooking up the events or anything like that because the jQuery plugin is going to handle all of that. But we do have to create, or at least call, the jQuery plugin and the way that we could do that is inside of the mounted method. So that whenever the component is mounted, well, then we could retrieve our element from the DOM. So, we would use our id property here for the selector, and then we would simply call the accordion method. However, for this to work, we need to bring in the jQuery and the jQuery UI files. So, let me grab those. Once again, they're going to be CDNs. And we could rename our files just because this really isn't specific to jQuery or View. I am going to delete the jQuery specific files though, because we don't need those. But as far as the markup, the template, and the JavaScript, that should be it. Now we do need to modify the CSS here because that's going to get us close and we are going to see the functionality. But we are still going to need to tweak the CSS. So if we look at this in the browser, we can click on the items, we see the accordion work. But let's modify this. We aren't using these classes, so instead we can just use the elements here. And for the panels, we could use the sibling selector, just like that. So if we look back, then we have the styling there. So we have a wrapper. But one thing that we are lacking is the ability to apply any options to this plugin. So what we could do is just add a lot of props to our component like for example, there is an active prop so we could say, active=, and then whichever item that we wants to be active. So if we wanted the second item to be active, then we can pass in the value of one. That would rather tedious because there's quite a few options so instead, what we could do is just have a property called options. And then we can pass in a JavaScript object that would have the values that we wanted. Because after all, that's exactly what we would be doing with calling the plugin method and then passing in the options. So let's add another prop here, we'll call it options. And then we will simply pass those options to the call to accordion. And that is going to make that work. So if we look at the browser, we see that the second item is automatically selected or is automatically active. If we change this to the third item, then we will see that, and if we get rid of the options at all, we're not going to run into any errors. So let's pull up the console, everything looks fine, and we still have the functionality that we had before. So when it comes to using jQuery plugins that are either to complex, to convert, or you just don't own the code and it doesn't make sense to convert. You can create a wrapper that gives you the declarative syntax that a view would have, but it also saves you a lot of time, because there's not a lot of extra code that you have to write.