Attributes

Besides attribute syntax and features from templ, doors provides an API for system (framework-related) attributes.

System attributes are used for:

• event handlers (hooks)
• data passing
• dynamic links
• dynamic href/src for files
• ….and more

Most of the system attributes are represented by struct types that start with doors.A...

Magic Attributes

You can attach system attributes using magic attribute syntax. Just render the attribute before the element to which you want to add it.

// magic attribute insertion to handle click event on the button
@doors.AClick{
  // handler function, doors.REvent is http request wrapper
	On: func(ctx context.Context, r doors.REvent[doors.PointerEvent]) bool {
	   /* event processing */
	   
		// not done, keep hook active
		return false
	}
	/* optional fields */
}
<button>Click Me!</button> 

In this example, the framework will add event binding attributes to the following button.

It’s also allowed to stack multiple magic attributes

// attach onchange handler
@doors.AChange{
/* setup */
}
// attach onfocys handler
@doors.AFocus{
/* setup */
}
<input type="text" name="name">

Additionally, you can prepare attributes as an array in a separate function:

func attrs() []doors.Attr {
  return []{doors.AChange{/* setup */}, doors.AFocus{/* setup */}}
}

To attach it, use doors.Attributes([]doors.Attr) component:

@doors.Attributes(attrs())
<input type="text" name="name">

❌ If a valid HTML tag does not follow magic attribute, it will be dropped, for example:

@doors.AClick{
/* setup */
}
Some text // interrupts attribute attachement!
<button>Click Me!</button> 

Pre-initialization

Sometimes you want to use the same handler for multiple elements. To do this, pre-initialize the attribute and then render it where you need it

// initialization
{{ onchange := doors.A(ctx, doors.AChange{
	/* setup */
}) }}

@onchange
<input type="radio" name="radio" value="option1"/>
@onchange
<inputtype="radio" name="radio" value="option2"/>

Before rendering or initializing, there is no actual attribute object, doors.A..{} is only a configuration structure.

Attribute Spread

Alternatively to Magic Attributes, you can utilize templ spread syntax

{{  onclick := doors.AClick{
	/* setup */
} }}

<button { doors.A(ctx, onclick)... }>Click Me!</button>

⚠️ One element can’t have magic and spread attributes; one overwrites another.