7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 6Length: 45 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Converting jQuery Plugins

If we're migrating jQuery-based code to Vue.js, it's obvious that we'll need to rewrite some plugins. In this lesson, we'll look at converting a simple accordion plugin.

1 lesson, 01:41


2.Migrating From jQuery to Vue.js
4 lessons, 42:33

Why Change?


Converting jQuery Plugins

Wrapping a jQuery Plugin

1 lesson, 01:02


2.3 Converting jQuery Plugins

In this lesson we are going to convert an existing jQuery plug in into a view component. And before we begin let me just first of all say that's just about every rule has an exception. And the same is true for this whole discussion of converting jQuery code into view code. There will be some times when it just doesn't make sense to convert a plugin or some other jQuery code. It could be because it requires a lot of extra work because these are two completely different frameworks that approach things completely different. So a lot of times you have to rethink how you need to approach a particular problem. Sometimes, that's just not worth the time. So there's nothing wrong. If you come across something that just doesn't need to be changed. Because after all, you could wrap a j query plugin with a view component. So I just wanted to point that out. So in this case, what we are going to do is convert this accordion plugin. We have, well, just a normal accordion. We click on these little headings and then this content pops up here. So if we look at the mark up, it's very straightforward. Everything is surrounded with a element with an id of, accordion. And then we have an element for the heading. And then a div element that contains the associated content. So this div element pretty much belongs to this h3 element. And then this div element belongs to this h3, and so on and so forth. So what the jQuery plugin does is add a class to the outer div element, it gives it a class of accordion, it gives the h3 element a class of accordion header. Then it gives the div element the class of accordion panel. And there is state being tracked, but that state is being stored in the dom. So every time that we open up one of these panels, it has an attribute called data-active, it's set to true. And whenever we close a panel that attribute is removed from the element. So looking at the code that's just basically what's going on. It's prepping all of the elements, it then adds a click event listener, and it listens for whenever one of those h3 elements is clicked. And when it is, it gets the associated panel it adds or removes the data-active attributes in order to control whether or not that item displays. So as as far as our view is concerned, we are going to pretty much just start from scratch, because one of the ideas behind view is to use declarative syntax. So while we could come in here and we could go ahead and add those classes because after all we are building an accordion component. The classes just need to be there. The idea behind the jQuery plugin was to take just normal markup and then voila, you have this interactive thing, whereas with view, we're going in knowing that we are going to create an accordion. So we could add the class here, but once again that doesn't make her code a little bit more declarative, but we can get away with doing something better. For example, we could do something like this, where we have an element simply called accordion, and then we could have an attribute that would be title or heading or something along those lines. And that would be where we put our heading or our title content. And then inside of our accordion element we could have the content that is going to be shown or hidden, so it would look like this. And that's pretty declarative, as we are looking at our markup, hey, this is an accordion, it has a title, and this is the content that is going to be either shown or hidden. So this is our approach that we are going to take. So lets go ahead and quickly make these modifications. And we're also going to do something just a little bit different, in that we are going to define our template In our markup here as opposed to doing that inside of the component itself. Because if there's one thing I hate, it is having [LAUGH] HTML markup in a JavaScript string. I hate it. It's not just JavaScript, just any language at all. So let's this up, so that we have our three accordion elements. And then we'll get started on our templates. Now, the template is going to look very similar to the market that we just replaced. In fact, let's leave this here just so that we have that kind of as a reference. And here we're going to add a script element, we're going to set the type equal to text-x-template and we also need to give it an ID. Because whenever we create our component we want to be able to point to this template so that it pulls it in. So let's just give this an ID of accordion-template. And then we will have our markup. So we need to surround everything with a container element. Div is going to be just fine, and then we will have our h3 element for the title. Now, we could go ahead and declare our click event here. So let's do that. And we have a choice, we could do something as simple as changing our state here. So we can have an active flag, and we can just change the value of that. Or we could use a method. I'm going to go with the latter because I don't think we've done that yet. So we're going to have a method called toggle Which is going to, essentially, toggle the panel on and off. And then for the text of this element, we will have our title. For our content, we will have our div. And we can go ahead and add those classes here. Because, as I said, we're going in knowing that we are creating an accordion. So it makes sense to go ahead and assign our classes. So as far as the h3 is concerned, that was an accordion-header. And then the div element is going to have a class of accordion panel. Now, when it comes to actually showing and hiding our content, we can do so in a variety of different ways. Because we are using Bootstrap, there are some classes that are available to us so that we could easily show and hide. So we could use the Bootstrap collapse class, and that is going to Well, collapse that div. It's going to hide it. And then we can toggle it on and off based upon using the show class. So here we can bind the use of the show class to our active property. So when active is true, show will be applied and then our div element will show. Whenever it's false, it will be removed, and then our div element will be hidden. Now as far as the actual content is concerned, we want to take what was in between the accordion opening and closing tags, and use that here for our content. So we're going to use the slot here to put that content, and that will just work. So three's our template. We don't really need to do anything else, except creating our new view instance here. So let's get to the id of this div. That's accordion, let's change this to app because that's what we would typically see here. So let's change that, and then we will say that our element is the element within ID of app. So as far as our JavaScript code is concerned, it's going to be very straightforward then, we just want to create our components. So we will call the component method and since we used the accordion element we will use accordion here. And then as far as the properties we first of all want to set our template. And we have that inside of that script tag or that script element with ID of accordion template. And then we also need to specify our props. Because we have that title prop that we're going to use. So we have that. But we also have that active property that we want to toggle on and off. So we're going to have our data. In this case it needs to be a function. That returns an object that contains that information. So we'll set active to false, because I don't know about you. But whenever I think of an accordion, I think of it defaulting to being closed. So we will set active to false, and then we will have our methods because we opted to use that toggle method. So all we're going to do is change the value of active. Let's go ahead and add another line just so we can justify using the method here. So we are toggling the element. So there we go, that should be it. We should be able to go to our view version in the browser, and, well, that wasn't exactly what I wanted to see. But let's get rid of that hanging H3 and div element. Let's get rid of that there, and we do need to add that accordion class. So that was the other thing we're missing. So two are outer div element. We'll just add the class of accordion there. So now we have what looks like our jQuery version. Whenever we click on any of these items, nothing happens, yay. So we have a problem that we get, well, that's interesting. Let's inspect the elements and see what is going on. We never modified our CSS here because the old CSS was still using this data-active attribute for the selector. So in this case, we could show. And now we should be able to see that happen, and we do. Now, that's not the only way we could have done that week. We could have use AV if here. So let's add that, and then we will get rid of the CSS stuff. So, in this case, we no longer need collapse, we no longer need the binding for the show class. We also need to adjust our CSS here so that we don't have any of these display CSS properties. And so if we go back to the browser, now we can see the same exact results, but with less CSS. So once again, by using view, we have seen that we've made our markup much easier to read and understand what's going on. And we've also replicated the same results by writing much less JavaScript code.

Back to the top