有条件地绑定Aurelia的活动

Question

Is it possible to conditionally bind an event using .trigger() or .delegate() in the html view?

This is the regular way:

<div mousedown.delegate="handleMouseDown($event)"></div>

I was thinking of something like:

<div mousedown.delegate="isDraggable ? handleMouseDown($event) : null"></div>

Ideally if isDraggable === false no handler is registered.

Currently I'm just doing this check in the view model attached() function with .addEventListener() is there a better way?

Answer 1

As @thebluefox pointed out in the question comments

<div mousedown.delegate="isDraggable ? handleMouseDown($event) : null"></div>

does work however there are some issues when adding in a binding behavior.

The following examples will fail when evaluating the ternary

<div mousedown.delegate="isDraggable ? handleMouseDown($event) & throttle:500 : null"></div>

<div mousedown.delegate="isDraggable ? (handleMouseDown($event) & throttle:500) : null"></div>

As a workaround you can invert the test so the binding is last eg

<div mousemove.delegate="!isDraggable ? null : handleMouseMove($event) & throttle:500 "></div>