Advanced Options

The create method can take two parameters, clear and reverse. Use clear to clear the output before inserting the constructo and reverse to print the constructo at the beginning of the component and not at the end.

        
// to clear output
myTextConstructo({ text: "Hello World!" }).create("#app",{
    clear:true
});

// to prepend
myTextConstructo({ text: "Hello World!" }).create("#app",{
    reverse:true
});
       
      

Ids of Constructos

Each constructo get an unique id by Winnetou in order to it can be handled in your vanilla code. Constructo class returns a list of self ids to posterior reference. To get this, set a variable to the constructo to handle behaviors.

let myDiv = myTextConstructo({ text: "Hello World!" }).create("#app",{
    reverse:true
})

console.log(myDiv.ids.myTextConstructo)
       
      

In this above case, myDiv.ids.myTextConstructo will return the id provided by Winnetou, myTextConstructo-win-1, using this formula: constructoName-win-numberID.

Identifier

Some times we need to know exactly how an id will be called, for this we have and identifier option.

  
  let myDiv = myTextConstructo({ text: "Hello World!" },{
    identifier:'hello_world'
  }).create("#app",{
      reverse:true
  })
  
  console.log(myDiv.ids.myTextConstructo)
  // the output will be myTextConstructo-win-hello_world

         
        

Here, the id of our constructo will be myTextConstructo-win-hello_world

Props

Props can be optional and can receive descriptions.

    
<winnetou>
    <button id="[[btn]]" class="{{class?}}">{{text}}</button> 
</winnetou>

  
           
          

In this above code, the {{class?}} prop is optional. To add a description in a prop, use %.

      
<winnetou>
    <button id="[[btn]]" 
        class="{{?class%Define the button class}}">
            {{text}}
    </button> 
</winnetou>
  
    
             
            

create() vs constructoString()

The constructo create method will append (or prepend) the constructo in real DOM. You can pass an id or query selector as parameter in order to set where this constructo will be put on. Some times we need to get the string version of a constructo, for this we got constructoString method.