FREELessons: 7Length: 56 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Mixing Controllers

Stimulus wouldn't be very useful if we couldn't use multiple controllers with the same set of elements. We'll look at how to do that in this lesson.

2.3 Mixing Controllers

Stimulus is very flexible, in that it allows us to connect multiple controllers to a given element. So, let's first of all comment out these second and third div elements, just so that we can focus on the one here at the top. So we have this greeter controller and we've seen how it works. But let's also say that we want to write a controller that would then log the user's interaction with different elements within our page. So, things like the input elements. We might want to know whenever they type into an input element, or click on a button, or things like that. So, we would want to then attach that controller to our div element, and it's very easy to do so. All we need to do is just simply add that controller to our dated ash controller, and there we go. We have now attached that controller. Of course, this doesn't exist yet, but it will here in a few minutes. So, if you can attach multiple controllers, this should go without saying that you can attach multiple targets as well as multiple events. So, in the case of the input element, if we were wanting to log when the user types in, we would need to add the data-action attribute and then specify the event input in this case. And then the controller, so that would be logger, and then the # sign, and then the method name. Let's just call that log. And we would want to do the same thing, at least as far as the method is concerned for the button. But instead of handling the input element, we want to handle the click. And let's just be explicit here. I mean, yes, looking up the greet method to handle the button click was fine. But lets just explicit and say that we are connecting the click event here. So, this is rather straightforward, any time that we want to add something to a particular element, be it an action or a target, which we haven't done a target yet. We could come in here and we could say that we want to grab the value of whatever we're working with. So we could call this target simply, value. And this is why we have the naming scheme that we do, because Stimulus needs to know how to map these target names to the properties in the controllers. So this input target belongs to the greeter controller. This value target belongs to logger, although in this case, I don't think we really need another target. We might, but we'll just leave that off for now. So let's go to our Javascript and let's start writing some code. Let's take what we have for our greeter and let's use that as a basis. Let's get rid of this connect methods, or at least the call to console log, just so that we clean up what is going to be written to the console. And as far as our logger is concerned, right now we don't have any targets, so let's just take those out. If we need targets, then we can just come back and add them in. But then as far as our log method is concerned, we don't want to prevent any default action from occurring because that's going to be disruptive, especially if whatever the user is interacting with needs that default action there. So, we're not going to do that. So that instead we're going to grab information about whatever the user clicked on. So, we have our event object that's going to give us quite a bit of information. For example, the tag name, so we can get to that and let's also get the type of event that occurred, because that would be important as well. And we could also check to see if that particular target has a value. Now, in this case, I'm using the term target as the event target, not so much as the controller target. So, in this case, we could say value if the target element has a value, then great. If not, then, well, we don't really need a default value there. And so then we can start building our message, so let's do that. And the first thing that we could list is the name of the element, the tag, and event, and we will have the event type. But if we have a value, then we want to include that as well. So then we could simply append some data to message and, let's say, user data, and then we will bring in the value. So, that's all we need to do then is take this message and write it to the console. And we need to get rid of those two lines that have nothing to do with our logger and we'll be good to go. So, let's go to the browser. Let's start typing in here, and nothing happens. So, let me make sure I saved everything. I did. So, that means that there's an error somewhere. And there it is right there. This is not loggers, that's logger. So, now this should work. Let's start typing, and we can see that the input element had an event called input. That's a little confusing there, but that's what it is. Tag name was first, followed by the event, and then the user data. If we click on the Greet button, we should see the event but no user data, that's right. So, there we go, we have added another controller to our element. Now, let's say we want to use this logger across the entire page. So, one of the things we can do is, first of all, uncomment this and we could come in here and add the logger controller. Then we would set up all of the actions. So, we have the input's event being used down here on our third example, so let's go ahead and add that there. And let's add the click event for the A element inside of this second example. Let's go ahead and make this explicit there as well. So, we could go back to the browser, and let's click on the Greet link. We can see that this was an A element, the event was click, there is no user data involved there, so that's great. And as far as this other input element, once again, we will see that being logged. Now, there's a slightly better way of doing this. Instead of saying the logger controller is going to be used in all of these situations, we can get rid of that and instead, put it at a place that is higher in the document hierarchy, like the body tag. Or if there was another div element that was wrapping around all of these, we could put it there. But in this case, the body tag is going to be fine. So, not only can we assign multiple controllers to a given element, but we can also nest them as well, so that the logger is going to be at top and then all of these others use the greeter as well. We still have to specify any targets that we might have for the logger, as well as all of the actions. But at least as far as setting up the logger itself, we can do that here at the body. So whenever we go back to the browser and we start typing into this first input element, we see the exact same behavior. If we started typing into this other one, once again, we see the same thing. If we click on the Greet button, we see that's being logged. If we click on the Greet link, that is logged as well. So Stimulus is very flexible. We can assign as many controllers as we want to an element. We can also nest them. It really just depends upon what makes sense as far as our needs and our markup is concerned.

Back to the top