Modularize your Alpine JS components into Script Blocks 12

As I was telling you, the main feature that we have here in alpin or the most interesting thing is that we can create components directly in the html, here we place the Data, here we place the logic and we have, as they say, microcomponents, a fairly small component that does a particular operation, but in case it is necessary we can also create a component a bit like the scheme we have in Vue in which we have a Script block and this is useful when we have a lot of javascript, I will be injecting all of this in the same place since this is growing a lot and well obviously it makes reading maintenance and everything we already know difficult here and therefore we can also create a separate Script block which is a bit what I show you here, let's go up here first, then we simply create here a classic javascript function of a lifetime with any name that returns something, here it returns both the variables and functions:

<script>
  function data(){
    return {
             // variables y funciones
   }
}
</script>

That is a bit of a joke about using the pin to have a set of functions that we can invoke, for example, through the click event and the variables that we are going to use in the component, that is the basics. Here you have an example of the redundancy of the previous example of the previous component here, notice that now we are placing data, which is the name that we gave it here and it returns in this case the only Data that we have since we are not using functions, which would be the ar of all as we have it, we are going to do this exercise and then we will continue exploring some additional features, so well, over here anywhere I am going to place, I am going to place it here the Script block, here we place Data; it returns an object, an object with all the Data that we have, in this case if you will allow me to copy this here, I am not going to replace this because I want to make another one, I am going to select all of this because it is going to be similar, I am going to duplicate it, I think I duplicated it perfectly, I am going to call it component seven here, I am going to remove this, notice that in the end it is an object:

<script>
  function data(){
    return {
             // variables y funciones
   }
}
</script>

So I expect an object, so we have to return an object and place all the content of the functions and variables, just as we would define them directly in the HTML:

  <div
       x-data="data()">

       <template x-for="t in todos">
           <p>
               <template x-if="t.completed">
                   <span>Completed</span>
               </template>
               <template x-if="!t.completed">
                   <span>Incompleted</span>
               </template>
               <span x-text="t.task"></span>
           </p>
       </template>
   </div>

   <script>
       function data(){
           return {
               todos:[ { completed: true, task: 'Todo 1' }, { completed: false, task: 'Todo 2' }, { completed: true, task: 'Todo 3' }],
       }
   </script>

It's basically the same thing, so nothing like this, in case you fall short or find it difficult to define everything as who says line in the html, you can also use this syntax and Modularize your Alpine JS components.

08-12-2024 - Andrés Cruz

En español

• Category
• /
• JavaScript
• /
• Modularize your Alpine JS components into Script Blocks 12