Introduce id ref syntax

To capture events on elements we need a sophisticated event registering system. In other frameworks like Angular you are able to write code directly into the template (e.g: onhover="dosomething()"). But I don't really like the idea of having event-code in the template. Instead i like to separate it from the template. This leads to better separation of event logic and the pure look of a component. My initial idea is to introduce a ref syntax like angular but in a more sophisticated way:

<button #myButton></button>

@Component({
    view: "./button.rex"
})
class MyButton {
     // You can attach to id-refs by a decorator
     @onclick("myButton")
     onClick(target: Event) {
         //Do something on click of the button    
     }
}

The problem is that this syntax is limited when we have for-loops:

{
    for b in buttons {
        // Duplicate element with id myButton
        <button #myButton></button>
    }
}

Therefore I have to think of a syntax that gets around this problem

First idea:

{
    for b in buttons {
        // Generic ids
        <button #myButton{b}></button>
    }
}

@Component({
    view: "./button.rex"
})
class MyButton {
     // You can attach to id-refs by a decorator
     @onclick("myButton{button}")
     onClick(target: Event, button) {
         //Do something on click of the button    
     }
}

exellian / rex

Introduce id ref syntax #8