component event handler, and external event handlers

[amitu]

Once we have function support we can pass external event handlers. Also we can define event handlers in a separate place in the component.

Passing Event Handlers

-- fn submit(x, $y):
integer x:
integer $y:

y = x * 2

-- end: submit

-- integer $b: 10

-- foo:
a: 10
$b: $b
on-submit: submit

-- component foo:
integer a:
integer $b:
fn on-submit(integer x, integer $y): 

-- ftd.text: click me
$on-click$: { on-submit(x=a, $y=$b) }

-- end: foo

Can we also do this:

-- foo:
on-submit: fn(x, $y) { y = x * 2 }

Maybe even:

-- fn submit(a, x, $y):
integer a:
integer x:
integer $y:

y = x * a

-- end: submit

-- foo:
on-submit: submit(a=2)

In Elm we only create partials from the front:

foo : Int -> Int -> Int -> Int
foo x y a:

foo 10: Int -> Int -> Int

; foo (x = 10)
; there is no way to create foo (a = 10).

Application in ftd would happen in a named fashion, so submit(x=10) will create fn(y, a), submit(y=2) will create fn(x, a) and so on.

Defining Event Handlers

Instead of defining event handlers inline:

-- component foo:
integer $x:

-- ftd.text: hello
$on-click$: {x += 1}
-- end: foo

What if we defined them as functions:

-- component foo:
integer $x:

-- fn on-click():

x += 1

-- end: on-click

-- ftd.text: hello
$on-click$: {on-click()}
-- end: foo

This way code is a little bit more organised.

Default Function

-- component foo:
integer $x:
fn on-click(integer $x): my-on-click

-- fn my-on-click($x):

x += 1

-- end: on-click

-- ftd.text: hello
$on-click$: {on-click($x=$x)}
-- end: foo

[amitu]

-- fn submit(a, x, $y):
integer a:
integer x:
integer $y:

y = x * a

-- end: submit

-- foo:
on-submit(c: x, $d: $y): submit(a=2)


-- component foo:
integer a:
integer $b:
fn on-submit(integer c, integer $d): 

-- ftd.text: click me
$on-click$: { on-submit(c=a, $d=$b) }

-- end: foo

-- fn submit(a, x, $y):
integer a:
integer x:
integer $y:

y = x * a

-- end: submit

;; what if
-- integer c: 70

-- foo:
on-submit: submit(a=2, x=c, $y=$d)