FREELessons: 7Length: 56 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.2 Using Multiple Instances of a Controller

Stimulus may be the ultimate framework when it comes to code reuse. In this lesson, I'll show you how to reuse a controller for multiple elements within the page.

2.2 Using Multiple Instances of a Controller

In the previous lesson, we created our initial project and we started working with Stimulus. We began by writing some markup, and it was some very simple markup, just a div element that contains some child elements. But then we started adding in these data- attributes. For the div element, we said that we wanted to use a controller called greeter, so we set the data-controller = "greeter", naturally. And then we wanted to specify some elements that we wanted to be able to access from our JavaScript. So we created what we call targets, we used the data-target attribute and we set those on the elements that we wanted to. Now once again, the values of those are the controller name dot, and then the name of the target. So we have input and output. And as far as our JavaScript is concerned, we saw how everything just automatically links up. Once we defined our greeter controller, Stimulus was able to create an object from this class, and essentially bind it to this div element. So the connect method executed. We saw that there was a message written to the console, and we also saw things change in the dom, because we wrote the code to do that. And we automatically have these properties available to us for our targets, so that we have easy access to them. And if we wrote this using just plain ordinary vanilla JavaScript, yes, we could do that, but it's going to require a lot of calls to getElementById. And eventually, after we are done with this lesson, it would also involve us to wire up our own click event handler for the button. So let's do that now. With Stimulus, we have targets and then we have actions, and we define the action very similarly. We say data-action, and then we have the name of the controller followed by a pound sign or a hash, and then the name of the method that we want to call. So the syntax is very similar to our targets. The only difference in this particular case is the use of the pound or the hash instead of the dot. Now, there are some other things that we need to do if we're going to set up some other types of actions, which we will talk about here in a few moments. But let's go ahead and define this greet method in our controller so that we can then execute that. So we have a greet method, and this is a normal event handler. So this is going to retrieve, or rather receive, the event object that's passed to it. So if we needed to do anything with that object, we have that available to us. And in this case, we are simply going to get that value of our input and use that in the output. So let's just call our inputs value. And then we will use that value in the output. So we are greeting whoever it is that we type in, so we can have some kind of salutation. I'm going to say Greetings, and then we will use the value from our input. And that's going to work. That's all we have to write. So if we go to the browser and we type in a name, we click on Greet, and of course, we see our outputs. And naturally, no matter what we type into our input is going to be reflected in the output whenever we click on Greet. Okay, so I talked about setting up an event listener, how in this particular case this is all we need to do. But if we wanted to set up other events. Like for example, if we wanted to do something whenever we mouse over the button, instead of just specifying the controller and the method, we would then have to specify the event that we want to handle. So for the mouseover, we would say mouseover and then we would have an arrow. Just a dash and a greater than sign followed by the controller and the method. So now whenever we mouse over the button, then our greet method is going to execute. Now we can see that happen just like that. I didn't click on anything, so of course if we enter something to our input box, mouseover the button and there we go. However, with a button and with a link, we could just leave this off so that it would just automatically wire up the click event listener. Now, that's great and all, but this is where the real power of Stimulus comes into play. Let's take this and let's copy it and paste it. We don't have to fiddle with any ID attributes. We don't have to change really anything, except the things that we need to change. Like for example, let's say that instead of a button, we want an a element. So let's give it an href of #, and let's also change this closing tag, instead of an input element, let's have a text area. And of course, in this case we need a closing text area tag. And as far as the output is concerned, it really doesn't matter. But let's change this to an input element, although no, we can't because we're using the inner html so that we would have to add some logic there. Let's just leave this as a p element. So the idea is that we have different elements but we only had to change the markup. Our JavaScript is going to remain the exact same. However, we do need to do something about clicking this a element. Because if we enter in the name and we click on greet, we're going to see that the browser does indeed navigate. So it's not going to be like other frameworks that's going to suppress that behavior, we have to come in here and manually suppress it ourselves. So that is very easy to do. We have that event object, so we will simply say preventDefault(), and that will fix that. So let's try this again. Let's enter in a name. Let's greet. And then we see greetings and then the name that we typed in. Now, also notice that these are completely independent from one another. So we essentially have two greeter objects. One is bound to our first greeter component, for the lack of a better term, the second is bound to this second one. But let's also do this. Let's do something that's going to be a little bit different. Let's take our code. Actually, let's take our beginning code. Let's copy it and paste it. And we aren't going to have a button. Instead we are going to rely upon the input to provide that action. So we are going to not only have this as a target, but we will also have it as an action. But in this case, we can't just say greeter and greet for the action because we need to specify what event that we want to listen for. And in this case, we want to listen for the input event. So we will say input the arrow, followed by the controller and the method. So now whenever we go back and we just start typing here, we will see our output automatically update. So you learned some very important things in this lesson. The first was setting up event listeners so that you can perform actions within your code. The second thing you learned is that each use of a controller within a given page is going to create a whole new object bound to that element. So there is no relationship between one instance of greeter with another instance. They are independent of one another. And you also learned the power of Stimulus by just writing this controller. We were able to use it three different times with three different markups. One of those is dramatically different. But even in that case, we were still able to use the greet action so that we could update the output. In the next lesson, we are going to mix things up a bit. In this lesson, we saw that we could use a single controller multiple times in the same page. Well, in the next lesson, we are going to see that we can mix controllers using the same markup.

Back to the top